快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)底部彈出框

更新時(shí)間：2020年11月18日 15:36:49 作者：大白大白大白

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)底部彈出框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

微信小程序的底部彈出框，供大家參考，具體內(nèi)容如下

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; //頁(yè)面跳轉(zhuǎn)傳過(guò)來(lái)的值
 //初始化默認(rèn)一部分?jǐn)?shù)據(jù)已選中
 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
}

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: