微信小程序的底部弹出框,供大家参考,具体内容如下
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 }
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持站长技术。
在Asp.net Core之前所有的Action返回值都是ActionResult,Json(),File()等方法返...
我的所有网页编码是utf-8,当打开浏览器不对数据库插入数据时(main.asp),直接读...
如何通过PHP实现Des加密算法代码实例 注:php7以上不支持了,因为php7去掉了某些...
下面是Jquery中AJAX参数详细列表 : 参数名 类型 描述 url String (默认: 当前页...
一、前言 Hadoop原理架构本人就不在此赘述了,可以自行百度,本文仅介绍Hadoop-3...
我们在开发系统时,处理图片上传是不可避免的,例如使用thinkphp的肯定很熟悉imp...
Get方法在超链接后边紧跟要传递的参数对于用户是可见的如:http://tieba.baidu.c...
前一篇文章:“ .NET操作Excel利器Spire.Xls使用(1)入门介绍 ”给大家介绍了Spir...
文章目录 老规矩先上图看看是不是你想要的 来一个图形分析 话不多说代码实现 Nes...
Nextcloud 可以取代你用于协作、组织和任务管理的许多在线应用。 在前几年,这个...