微信小程序的底部弹出框，供大家参考，具体内容如下wxml




选择系列


{{item.txt}}








选择系列


{{item.txt}}



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 */
/* 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
});
}
})
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
}
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
}为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。《微信小程序开发教程》以上就是本文的全部内容，希望对大家的学习有所帮助。