时间:2021-05-18
本文实例为大家分享了微信小程序自定义底部弹出框的具体代码,供大家参考,具体内容如下
实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出动画)。效果图如下:
可适用于任何场景,如普通选项(如图)或者类似商城小程序选择商品属性的弹出框。只需要把内容替换自己需要的即可。
1. wxml代码
<view class="wrap"> <view bindtap="showModal"> <text>{{value}}</text> <icon class="arrow"></icon> </view> <!-- modal --> <view class="modal modal-bottom-dialog" hidden="{{hideFlag}}"> <view class="modal-cancel" bindtap="hideModal"></view> <view class="bottom-dialog-body bottom-positon" animation="{{animationData}}"> <!-- --> <view class='Mselect'> <view wx:for="{{optionList}}" wx:key="unique" data-value='{{item}}' bindtap='getOption'> {{item}} </view> </view> <view></view> <view class='Mcancel' bindtap='mCancel'> <text>取消</text> </view> </view> </view> </view>modal中,蓝色框框起来的,可按需替换。
2. wxss代码
.arrow{ display:inline-block; border:6px solid transparent; border-top-color:#000; margin-left:8px; position:relative; top:6rpx;}.modal{position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000;}.modal-cancel{position:absolute; z-index:2000; top:0; right:0; bottom: 0; left:0; background:rgba(0,0,0,0.3);}.bottom-dialog-body{width:100%; position:absolute; z-index:3000; bottom:0; left:0;background:#dfdede;}.bottom-positon{-webkit-transform:translateY(100%);transform:translateY(100%);} .bottom-positon{ text-align: center;}.Mselect{ margin-bottom: 20rpx;}.Mselect view{ padding: 26rpx 0; background: #fff;}.Mselect view:not(:last-of-type){ border-bottom: 1px solid #dfdede;}.Mcancel{ background: #fff; padding: 26rpx 0;}如果项目中,多个页面使用了同样效果弹出框,如下的代码可以放到公共样式文件app.wxss中。
3. js代码
Page({ /** * 页面的初始数据 */ data: { optionList:['所有','选项1','选项2'], value:'所有', hideFlag: true,//true-隐藏 false-显示 animationData: {},// }, // 点击选项 getOption:function(e){ var that = this; that.setData({ value:e.currentTarget.dataset.value, hideFlag: true }) }, //取消 mCancel: function () { var that = this; that.hideModal(); }, // ----------------------------------------------------------------------modal // 显示遮罩层 showModal: function () { var that = this; that.setData({ hideFlag: false }) // 创建动画实例 var animation = wx.createAnimation({ duration: 400,//动画的持续时间 timingFunction: 'ease',//动画的效果 默认值是linear->匀速,ease->动画以低速开始,然后加快,在结束前变慢 }) this.animation = animation; //将animation变量赋值给当前动画 var time1 = setTimeout(function () { that.slideIn();//调用动画--滑入 clearTimeout(time1); time1 = null; }, 100) }, // 隐藏遮罩层 hideModal: function () { var that = this; var animation = wx.createAnimation({ duration: 400,//动画的持续时间 默认400ms timingFunction: 'ease',//动画的效果 默认值是linear }) this.animation = animation that.slideDown();//调用动画--滑出 var time1 = setTimeout(function () { that.setData({ hideFlag: true }) clearTimeout(time1); time1 = null; }, 220)//先执行下滑动画,再隐藏模块 }, //动画 -- 滑入 slideIn: function () { this.animation.translateY(0).step() // 在y轴偏移,然后用step()完成一个动画 this.setData({ //动画实例的export方法导出动画数据传递给组件的animation属性 animationData: this.animation.export() }) }, //动画 -- 滑出 slideDown: function () { this.animation.translateY(300).step() this.setData({ animationData: this.animation.export(), }) }, })如上,用“// ------------------------------------------modal”隔开的以下的代码可不需要动。
如果一个页面中使用了两个同样效果的弹出框,只需要稍微修改一下就行了,这里就不贴出来。
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
微信小程序之自定义底部弹出框动画,供大家参考,具体内容如下最近做小程序时,会经常用到各种弹框。直接做显示和隐藏虽然也能达到效果,但是体验性太差,也比较简单粗暴。
微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限
微信小程序自定义创建,最近自己捣鼓微信小程序的东西,这里对自定义创建做一个简单的资料整理,也许可以帮助大家。微信小程序自定义创建自定义创建与默认创建完全相同,只
本文实例讲述了微信小程序实现的自定义分享功能。分享给大家供大家参考,具体如下:大家都知道,小程序有分享的功能,可以分享整个程序,也可以自定义分享的内容onSha
本文实例为大家分享了微信小程序自定义对话框弹出和隐藏动画的具体代码,供大家参考,具体内容如下index.js//index.jsvarapp=getApp();