微信小程序模态框

程序实现步骤

<!--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})