微信小程序带动画弹窗组件使用方法详解

 更新时间:2018年11月27日 14:34:02   作者:孙智斌  
这篇文章主要为大家详细介绍了微信小程序带动画弹窗组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序带动画弹窗的具体代码,供大家参考,具体内容如下

基本效果如下:

具体实现如下:

第一步:

新建一个 components 文件夹,用于存放我们以后开发中的所用组件,在 components 组件中新建一个popup文件夹来存放我们的弹窗组件,在popup下右击新建 Component 并命名为 popup 后,会生成对应的 json wxml wxss js 4个文件,也就是一个自定义组件的组成部分,此时项目结构应该如下图所示:

第二步上代码:

popup.wxml

<view hidden="{{!flag}}" class='container' style=''>
 <view bindtap='_error' class='wrap {{wrapAnimate}}' style='background:rgba(0,0,0,{{bgOpacity}});'></view>
 <view class='popup-container {{popupAnimate}}'>
 <view class="wx-popup-title">{{title}}</view>
 <view class="wx-popup-con">{{content}}</view>
 <view class="wx-popup-btn">
  <text class="btn-no" bindtap='_error'>{{btn_no}}</text>
  <text class="btn-ok" bindtap='_success'>{{btn_ok}}</text>
 </view>
 <image bindtap='_error' src='../../image/close.png' mode='widthFix' class='btn-colse'></image>
 </view>
</view>

popup.wxss

.container{font-size:15px;color:#666;font-weight: bold;z-index:2;position:fixed;width:100vw;height:100vh;}
.wrap{position:fixed;top:0;left:0;bottom:0;right:0;}
.popup-container {position: fixed;left: 50%;top: 100%;width: 80%;max-width: 600rpx;border: 2rpx solid #ccc;border-radius: 10rpx;box-sizing: bordre-box;transform: translate(-50%, -50%);background: #fff;opacity: 0;}
.wx-popup-title {width: 100%;padding: 20rpx 0;text-align: center;font-size: 40rpx;border-bottom: 2rpx solid #89cfea;}
.wx-popup-con {margin: 60rpx 10rpx;text-align: center;}
.wx-popup-btn {display: flex;justify-content: space-around;margin-bottom: 40rpx;}
.wx-popup-btn text {display: flex;align-items: center;justify-content: center;width: 30%;height: 88rpx;border: 2rpx solid #ccc;border-radius: 88rpx;}
.btn-colse{width:35px;height:35px;position:absolute;bottom:-60px;left:50%;margin-left:-17.5px;}
.wrapAnimate{animation: wrapAnimate 1s linear forwards}
@keyframes wrapAnimate{
 0%{}
 100%{background:rgba(0,0,0,0.7);}
}
.wrapAnimateOut{animation: wrapAnimateOut 1s 0.2s linear forwards}
@keyframes wrapAnimateOut{
 0%{background:rgba(0,0,0,0.7);}
 100%{background:rgba(0,0,0,0);}
}
.popupAnimate{animation: popupAnimate 1.2s linear forwards}
@keyframes popupAnimate{
 0%{}
 60%{top:47%;opacity: 1;}
 80%{top:53%;opacity: 1;}
 100%{top:50%;opacity: 1;}
}
.popupAnimateOut{animation: popupAnimateOut 1.2s linear forwards}
@keyframes popupAnimateOut{
 0%{top:50%;opacity: 1;}
 20%{top:47%;opacity: 1;}
 100%{}
}

popup.js

Component({
 options: {
 multipleSlots: true // 在组件定义时的选项中启用多slot支持
 },
 /*组件的属性列表*/
 properties: {
 title: {
  type: String,
  value: '标题'
 },
 // 弹窗内容
 content: {
  type: String,
  value: '内容'
 },
 // 弹窗取消按钮文字
 btn_no: {
  type: String,
  value: '取消'
 },
 // 弹窗确认按钮文字
 btn_ok: {
  type: String,
  value: '确定'
 }
 },
 /* 组件的初始数据 */
 data: {
 flag: true,
 bgOpacity:0,
 wrapAnimate:'wrapAnimate',
 popupAnimate:'popupAnimate'
 },
 /* 组件的方法列表 */
 methods: {
 //隐藏弹框
 hidePopup: function () {
  const that = this;
  this.setData({ bgOpacity: 0.7, wrapAnimate: "wrapAnimateOut", popupAnimate:"popupAnimateOut"})
  setTimeout(function(){
  that.setData({flag: false})
  },1200)
 },
 /* 内部私有方法建议以下划线开头 triggerEvent 用于触发事件 */
 _error() {//触发取消回调
  this.triggerEvent("error")
 },
 _success() {//触发成功回调
  this.triggerEvent("success");
 }
 }
})

popup.json

{
 "component": true,
 "usingComponents": {}
}


第三步引用组件:

index.json

{
 "usingComponents": {
 "popup":"/components/popup/popup"
 }
}

index.wxml

<popup
 id='popup'
 title='弹窗组件'
 content='学会了吗'
 btn_no='没有'
 btn_ok='学会了'
 binderror="_error"
 bindsuccess="_success"
 >

</popup>

index.js

Page({
 showPopup() {
 this.popup.showPopup();
 },
 //取消事件
 _error() {
 console.log('你点击了取消');
 this.selectComponent("#popup").hidePopup();
 },
 //确认事件
 _success() {
 console.log('你点击了确定');
 this.selectComponent("#popup").hidePopup();
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 详释JavaScript执行环境与执行栈

    详释JavaScript执行环境与执行栈

    一句话就可以概括:代码 ( 包括函数 ) 执行时所需要的所有信息就是执行环境。由于 ES 历经多个版本,所以执行环境的标准也一直在变。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 一个多浏览器支持的背景变暗的div并可拖动提示窗口功能的代码

    一个多浏览器支持的背景变暗的div并可拖动提示窗口功能的代码

    兼容IE、Firefox、Opera前几天在网上找了许多资料,看了不少兄弟的源码,一直找不到合适的,要不就是拖动有问题,要不就是不兼容Firefox,所以自已写了一个,下面是代码:
    2008-04-04
  • Javascript removeChild()删除节点及删除子节点的方法

    Javascript removeChild()删除节点及删除子节点的方法

    这篇文章主要介绍了Javascript removeChild()删除节点及删除子节点的方法的相关资料,需要的朋友可以参考下
    2015-12-12
  • 在线所见即所得HTML编辑器的实现原理浅析

    在线所见即所得HTML编辑器的实现原理浅析

    这篇文章主要介绍了在线所见即所得HTML编辑器的实现原理浅析,本文用初始化、打开编辑功能、获取编辑器的内容、增加样式设置、再进一步等步骤阐述在线编辑器的基本实现原理,需要的朋友可以参考下
    2015-04-04
  • 微信小程序 (地址选择1)--选取搜索地点并显示效果

    微信小程序 (地址选择1)--选取搜索地点并显示效果

    这篇文章主要介绍了微信小程序 (地址选择1)--选取搜索地点并显示效果,实现思路是通过拖动地图,搜索地址,选择地址并将地址值传给文本框,具体实例代码跟随小编一起看看吧
    2019-12-12
  • JavaScript事件循环剖析宏任务与微任务

    JavaScript事件循环剖析宏任务与微任务

    这篇文章主要为大家介绍了JavaScript事件循环剖析宏任务与微任务示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • JavaScript实现三级联动菜单实例代码

    JavaScript实现三级联动菜单实例代码

    这篇文章主要为大家详细介绍了JavaScript实现三级联动菜单实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • js完美实现@提到好友特效(兼容各大浏览器)

    js完美实现@提到好友特效(兼容各大浏览器)

    本文给大家分享的是一则使用javascript完美实现兼容各大浏览器的@好友自动提示的特效,是根据百度贴吧的效果模仿来的,推荐给小伙伴们,希望大家能够喜欢。
    2015-03-03
  • JS module的导出和导入的实现代码

    JS module的导出和导入的实现代码

    这篇文章主要介绍了JS module的导出和导入的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • 深入学习JS XML和Fetch请求

    深入学习JS XML和Fetch请求

    这篇文章主要介绍了深入学习JS XML和Fetch请求,文章通过围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09

最新评论