溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小程序開發中如何實現一個底部彈出框功能？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
具體內容如下
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
}關于小程序開發中如何實現一個底部彈出框功能問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
