微信小程序底部弹出框

article/2025/9/21 8:35:05

微信小程序的底部弹出框
这里写图片描述

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 */

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 = animationanimation.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 = animationanimation.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
}