微信小程序实现底部弹出框
程序员文章站
2022-11-14 10:06:09
微信小程序的底部弹出框,供大家参考,具体内容如下wxml
微信小程序的底部弹出框,供大家参考,具体内容如下
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 }
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。