微信小程序实现底部弹出框

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

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
}

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。