微信小程序模態框

程序實現步驟

<!--index.wxml--><view class="modals modals-bottom-dialog" hidden="{{hideModal}}">     <view class="modals-cancel" bindtap="hideModal"></view>     <view class="bottom-dialog-body bottom-pos" animation="{{animationData}}">    <view class="swiper-tab">         <scroll-view class="scroll-view_H" scroll-x>        <view class='list' style='width:{{ width }}rpx'>          <view bindtap="select" wx:for="{{ calendar }}" wx:for-item="item" wx:for-index="index" data-index="{{ index }}" class='listItem {{index == currentTab ? "current":""}}' wx:key='' data-date="{{ item.date}}">            <text class='name'>{{ item.week }}</text>            <text class='date'>{{ item.date }}</text>          </view>        </view>      </scroll-view>    </view>      <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:500rpx">        <swiper-item wx:for="{{ calendar }}" wx:key='' catchtouchmove="stopTouchMove"   >        <!-- 作品 -->             <view class='time'>          <view wx:for="{{ timeArr }}" wx:for-item="timeItem" wx:for-index="timeIndex" data-tindex="{{ timeIndex }}" data-time="{{ timeItem.time}}" bindtap='selectTime' class='listItem {{ currentTime == timeIndex ? "current":"" }}' wx:key=''>            <text>{{ timeItem.time }}</text>            <text>{{ timeItem.status }}</text>          </view>        </view>      </swiper-item>        </swiper>    </view> </view> <button bindtap="showModal">點我預約</button>

/**index.wxss**//*模態框*/ .modals{    position:fixed;     z-index: 999;     top:0;     left: 0;     right:0;     bottom: 0;} .modals-cancel{    position:absolute;     z-index:1000;     top:0; left: 0;     right:0;     bottom: 0;     background-color: rgba(0,0,0,.5);} .bottom-dialog-body{    position:absolute;     z-index:10001;     bottom:0;     left:0;     right:0;     height:600rpx;     background-color: #fff;} /*動畫前初始位置*/ .bottom-pos{    -webkit-transform:translateY(100%);    transform:translateY(100%);}/* pages/orderTime/index.wxss */scroll-view{  height: 128rpx;  width: 100%;}scroll-view .list{  display: flex;  flex-wrap: nowrap;  justify-content: flex-start;    width: 1302rpx; }scroll-view .listItem{  text-align: center;  width: 186rpx;  height: 128rpx;  background-color: #f1f2f6;  padding-top: 30rpx;  box-sizing: border-box;  /* float: left; */  display: inline-block;}scroll-view .listItem text{  display: block;}scroll-view .listItem .name{  font-size: 30rpx;}scroll-view .listItem .date{  font-size: 30rpx;}scroll-view .current{  background-color: #76aef8;}scroll-view .current text{  color: #fff;}.time{  width: 95%;  display: flex;  flex-wrap: wrap;  justify-content: flex-start;  margin: 0 auto;  margin-top: 30rpx;}.time .listItem{  width: 30%;  height: 120rpx;  text-align: center;  box-sizing: border-box;  background-color: #fff;  padding-top: 20rpx;  border: 1px solid #b9c1c8;  border-radius: 50rpx;  margin-left: 5%;  margin-bottom: 20rpx;}.time .listItem:first-child{    margin-left: 0%;}.time .listItem:nth-child(4){    margin-left: 0%;}.time .listItem:nth-child(7){    margin-left: 0%;}.time .listItem text{  display: block;  font-size: 30rpx;}.time .current{  border: 1px solid #76aef8;}.time .current text{  color: #76aef8;}

// 顯示遮罩層 showModal: function () {   var that=this;   that.setData({     hideModal:false   })   var animation = wx.createAnimation({     duration: 600,//動畫的持續時間 默認400ms 數值越大，動畫越慢 數值越小，動畫越快     timingFunction: 'ease',//動畫的效果 默認值是linear   })   this.animation = animation   setTimeout(function(){     that.fadeIn();//調用顯示動畫  },200)},// 隱藏遮罩層 hideModal: function () {  var that=this;  var animation = wx.createAnimation({    duration: 800,//動畫的持續時間 默認400ms 數值越大，動畫越慢 數值越小，動畫越快     timingFunction: 'ease',//動畫的效果 默認值是linear  })  this.animation = animation  that.fadeDown();//調用隱藏動畫  setTimeout(function(){    that.setData({ hideModal:true })  },720)//先執行下滑動畫，再隱藏模塊},

//動畫集fadeIn:function(){  this.animation.translateY(0).step()   this.setData({    animationData: this.animation.export()//動畫實例的export方法導出動畫數據傳遞給組件的animation屬性  })},fadeDown:function(){    this.animation.translateY(300).step()  this.setData({    animationData: this.animation.export(),  })},

// 計算每月第一天是星期幾function getFirstDayOfWeek(year, month) {  return new Date(Date.UTC(year, month - 1, 1)).getDay();}const date = new Date();const cur_year = date.getFullYear();const cur_month = date.getMonth() + 1;const cur_date=date.getDate();const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];//利用構造函數創建對象function calendar(date,week){  this.date=cur_year+'-'+cur_month+'-'+date;  if(date==cur_date){    this.week = "今天";  }else if(date==cur_date+1){    this.week = "明天";  }else{    this.week = '星期' + week;  }}//當前月份的天數var monthLength= getThisMonthDays(cur_year, cur_month)//當前月份的第一天是星期幾var week = getFirstDayOfWeek(cur_year, cur_month)var x = week;for(var i=1;i<=monthLength;i++){  //當循環完一周后，初始化再次循環  if(x>6){    x=0;  }  //利用構造函數創建對象  that.data.calendar[i] = new calendar(i, [weeks_ch[x]][0])  x++;}//限制要渲染的日歷數據天數為7天以內（用戶體驗）var flag = that.data.calendar.splice(cur_date, that.data.calendar.length - cur_date <= 7 ? that.data.calendar.length:7)that.setData({  calendar: flag})