微信小程序之底部弹框预约插件-白红宇

微信小程序之底部弹框预约插件

阅读量：6280 次

发布时间：2019-06-22

本文共 4969 字，大约阅读时间需要 16 分钟。

代码地址如下：

一、前期准备工作：

软件环境：微信开发者工具

官方下载地址：

1、基本需求。

实现用户预约

时间可选

预约类型更具需求可自定义

2、案例目录结构

二、程序实现步骤：

1.预约index.wxml代码


        
             
              
             
                   
                   
                      
          
          
           { { item.week }}
           
          
           { { item.date }}
           
                     
                  
               
                
                  
                   
                         
                      
          
          
           { { timeItem.time }}
           
          
           { { timeItem.status }}

2.预约index.wxss代码

/**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;}

3.预约index.js逻辑代码

a.遮罩层的显示、隐藏

// 显示遮罩层   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)//先执行下滑动画，再隐藏模块  },

b.底部弹出动画集

//动画集  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(),    })  },

c.利用构造函数创建对象,限制要渲染的日历数据天数为7天以内（用户体验）

// 计算每月第一天是星期几    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    })

d.点击tab切换,禁止手动滑动底部日期

/**    * 点击tab切换    */    swichNav: function( e ) {      var that = this;      if( this.data.currentTab === e.target.dataset.current ) {        return false;      } else {        that.setData( {          currentTab: e.target.dataset.current        })      }    },  // 禁止手动滑动  stopTouchMove: function() {    return false;  }