微信小程序底部弹出框

微信小程序的底部弹出框

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
}