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

代码地址如下：
http://www.demodashi.com/demo/13982.html

一、前期准备工作：

软件环境：微信开发者工具
官方下载地址：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 = animationthat.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;}

三、案例运行效果图：

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

代码地址如下：
http://www.demodashi.com/demo/13982.html

注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

微信小程序之底部弹框预约插件相关推荐

html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
【微信小程序封装底部弹出框二】
[微信小程序封装底部弹出框二]  <view><button style="margin-top: 300px;" ...
微信小程序自定义授权弹框
微信小程序自定义授权弹框最近微信获取用户信息的接口有调整,就是这货:wx.getUserInfo(OBJECT),文档描述如下: 此接口有调整,使用该接口将不再出现授权弹窗,请使用 <butt ...
【微信小程序】底部弹出式搜索框
微信开发者工具的准备工作详见: [微信小程序]初始页面和导航栏. 设计中会使用到Vant Weapp组件库,添加组件库的方法参照官网:Vant Weapp - 轻量.可靠的小程序 UI 组件库. 注意 ...
微信小程序自定义picker弹框组件
要有遥不可及的梦想,也要有脚踏实地的本事.----------- Grapefruit.Banuit Gang(香柚帮) 柚子写项目遇到了一个问题,就是微信小程序官方文档上面的弹框组件picker,它 ...
微信小程序 -- 自定义底部弹出框（带动画--滑入滑出）
实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出动画).效果图如下: 可适用于任何场景,如普通选项(如图)或者类似商城小程序选择商品属 ...
微信小程序之model弹框
小程序model表达形式一般有两种: 1. 第一种: wxml: <button type="primary" bindtap="click">按钮 ...
uniapp微信小程序的各种弹框提示（轻提示）
您直接复制粘贴即可使用不需要做特殊的处理. 如您满意请给莫成尘点个Fabulous 1: 纯文字提示框 uni.showToast({title: '只有文字弹窗',icon: 'none', //如 ...
微信小程序点击按钮弹出弹窗_微信小程序开发弹出框实现方法
本文主要和大家分享微信小程序开发弹出框实现方法,本文所分享的代码很清晰,希望能帮助到大家. 消息提示框模态弹窗操作菜单 1.消息提示--wx.showToast(OBJECT) //show.js ...

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

一、前期准备工作：

1、基本需求。

2、案例目录结构

二、程序实现步骤：

1.预约index.wxml代码

2.预约index.wxss代码

3.预约index.js逻辑代码

三、案例运行效果图：

微信小程序之底部弹框预约插件相关推荐

最新文章

热门文章