微信小程序实现底部弹出框
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了微信小程序实现底部弹出框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
微信小程序的底部弹出框,供大家参考,具体内容如下
wxml
<!-- 弹出框 start --> <view class="dialog_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <view animation="{{animationData}}" class="dialog_attr_box" wx:if="{{showModalStatus}}"> <view style='background:white;position: relative;overflow: hidden;'> <view class='dialog_title'>选择系列</view> <view wx:for="{{list}}" wx:key="name" class='dialog_content'> <view class="{{item.status==0?'type_nor':'type_pre'}}" bindtap='typeClick' data-index='{{index}}'>{{item.txt}}</view> </view> </view> </view> <!-- 弹出框 end -->
wxss
/* dialog start */ .dialog_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.2; overflow: hidden; z-index: 1000; color: #fff; } .dialog_attr_box { width: 100%; overflow: hidden; position: fixed; bottom: 0; left: 0; z-index: 2000; background: #fff; padding-top: 1px; } .dialog_title { font-size: 16px; height: 30px; display: flex; align-items: center; padding: 10px; background: #80cbc4; color: white; } .dialog_content { position: relative; float: left; padding: 10px 10px; width: 25%; box-sizing: border-box; } /* dialog end */
js
var postData = require('../../../data/StoreData.js'); var typeList = postData.postListData; Page({ data: { list: typeList }, onLoad: function(options) { var id = options.id; //页面跳转传过来的值 //初始化默认一部分数据已选中 for (var i = 0; i < typeList.length; i++) { if (i % 2 == 0) { typeList[i].status = 0; } else { typeList[i].status = 1; } } this.setData({ list: typeList }); }, showModal: function() { // 显示遮罩层 var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.animation = animation animation.translateY(300).step() this.setData({ animationData: animation.export(), showModalStatus: true }) setTimeout(function() { animation.translateY(0).step() this.setData({ animationData: animation.export() }) }.bind(this), 200) }, hideModal: function() { // 隐藏遮罩层 var animation = wx.createAnimation({ duration: 200, timingFunction: "linear", delay: 0 }) this.animation = animation animation.translateY(300).step() this.setData({ animationData: animation.export(), }) setTimeout(function() { animation.translateY(0).step() this.setData({ animationData: animation.export(), showModalStatus: false }) }.bind(this), 200) }, typeClick: function(e) { var index = e.target.dataset.index; for (var i = 0; i < typeList.length; i++) { if (i == index) { var curStatus = typeList[i].status; if(curStatus == 0){ typeList[i].status = 1; }else{ typeList[i].status=0; } break; } } this.setData({ list: typeList }); } })
data
var list = [{ "id": 1, "txt": "AA" }, { "id": 2, "txt": "BB" }, { "id": 3, "txt": "CC" }, { "id": 4, "txt": "DD" }, { "id": 5, "txt": "EE" }, { "id": 6, "txt": "FF" }, { "id": 7, "txt": "RR" }, { "id": 8, "txt": "HH" }, { "id": 9, "txt": "KK" }, { "id": 10, "txt": "WW" } ] module.exports = { postListData: list }
为大家推荐现在关注度比较高的微信小程序教程一篇:长沙网络推广为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:微信小程序自定义底部弹出框功能
下一篇:微信小程序实现弹幕墙(祝福墙)