一、前期准備工作：
軟件環境：微信開發者工具
官方下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
1、基本需求。
- 實現用戶預約
- 時間可選
- 預約類型更具需求可自定義
2、案例目錄結構
二、程序實現步驟：
1.預約index.wxml代碼
<!--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>
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;
}
三、案例運行效果圖：
微信小程序之底部彈框預約插件
注：本文著作權歸作者，由demo大師代發，拒絕轉載，轉載需要作者授權