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

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。

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

相关推荐