微信小程序的底部弹出框,供大家参考,具体内容如下
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" 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 }
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- 任天堂今晚举行直面会!第三方及独立游戏展示
- 《哆啦A梦的铜锣烧店物语》发售!开罗公式+哆啦A梦
- 任天堂公布《塞尔达传说》系列时间线:野炊与王泪独立在外
- 五条人.2012-一些风景2CD【刀马旦】【WAV+CUE】
- 陈奕迅.2013-Easons.Life演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 许美静.1995-遗憾(新马版)【上华】【WAV+CUE】
- 《叶倩文 歌声情缘》[WAV+CUE][410MB]
- 《张国荣 首首动听经典不容错过 追忆的风 2CD》[WAV+CUE][870MB]
- 《腾格尔 容中尔甲 亚东 高原三星 男人篇 3CD》[WAV/分轨][1GB]
- 命运圣契公测实测可用兑换码大全 命运圣契最新兑换码分享
- 黑神话悟空上品疾蝠精魄获取方法一览|上品疾蝠精魄收集攻略
- 《七龙珠电光炸裂!ZERO》GT角色预告片曝光,15位新角色登场
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-7