微信小程序自定义底部弹出框功能


Posted in Javascript onNovember 18, 2020

本文实例为大家分享了微信小程序自定义底部弹出框的具体代码,供大家参考,具体内容如下

实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出动画)。效果图如下:

可适用于任何场景,如普通选项(如图)或者类似商城小程序选择商品属性的弹出框。只需要把内容替换自己需要的即可。

微信小程序自定义底部弹出框功能

1. wxml代码

<view class="wrap">
 <view bindtap="showModal">
 <text>{{value}}</text>
 <icon class="arrow"></icon>
 </view>
 
 <!-- modal -->
 <view class="modal modal-bottom-dialog" hidden="{{hideFlag}}">
 <view class="modal-cancel" bindtap="hideModal"></view>
 <view class="bottom-dialog-body bottom-positon" animation="{{animationData}}">
  <!-- -->
  <view class='Mselect'>
  <view wx:for="{{optionList}}" wx:key="unique" data-value='{{item}}' bindtap='getOption'>
   {{item}}
  </view>
  </view>
  <view></view>
  <view class='Mcancel' bindtap='mCancel'>
  <text>取消</text>
  </view>
 
 </view>
 </view>
 
</view>

modal中,蓝色框框起来的,可按需替换。

微信小程序自定义底部弹出框功能

2. wxss代码

.arrow{
 display:inline-block;
 border:6px solid transparent;
 border-top-color:#000;
 margin-left:8px;
 position:relative;
 top:6rpx;
}
/* ---------------------------- */
/*模态框*/
.modal{position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000;}
.modal-cancel{position:absolute; z-index:2000; top:0; right:0; bottom: 0; left:0; background:rgba(0,0,0,0.3);}
.bottom-dialog-body{width:100%; position:absolute; z-index:3000; bottom:0; left:0;background:#dfdede;}
/*动画前初始位置*/
.bottom-positon{-webkit-transform:translateY(100%);transform:translateY(100%);}
 
 
/* 底部弹出框 */
.bottom-positon{
 text-align: center;
}
.Mselect{
 margin-bottom: 20rpx;
}
.Mselect view{
 padding: 26rpx 0;
 background: #fff;
}
.Mselect view:not(:last-of-type){
 border-bottom: 1px solid #dfdede;
}
.Mcancel{
 background: #fff;
 padding: 26rpx 0;
}

如果项目中,多个页面使用了同样效果弹出框,如下的代码可以放到公共样式文件app.wxss中。

微信小程序自定义底部弹出框功能

3. js代码

Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 optionList:['所有','选项1','选项2'],
 value:'所有',
 
 hideFlag: true,//true-隐藏 false-显示
 animationData: {},//
 },
 // 点击选项
 getOption:function(e){
 var that = this;
 that.setData({
  value:e.currentTarget.dataset.value,
  hideFlag: true
 })
 },
 //取消
 mCancel: function () {
 var that = this;
 that.hideModal();
 },
 
 // ----------------------------------------------------------------------modal
 // 显示遮罩层
 showModal: function () {
 var that = this;
 that.setData({
  hideFlag: false
 })
 // 创建动画实例
 var animation = wx.createAnimation({
  duration: 400,//动画的持续时间
  timingFunction: 'ease',//动画的效果 默认值是linear->匀速,ease->动画以低速开始,然后加快,在结束前变慢
 })
 this.animation = animation; //将animation变量赋值给当前动画
 var time1 = setTimeout(function () {
  that.slideIn();//调用动画--滑入
  clearTimeout(time1);
  time1 = null;
 }, 100)
 },
 
 // 隐藏遮罩层
 hideModal: function () {
 var that = this;
 var animation = wx.createAnimation({
  duration: 400,//动画的持续时间 默认400ms
  timingFunction: 'ease',//动画的效果 默认值是linear
 })
 this.animation = animation
 that.slideDown();//调用动画--滑出
 var time1 = setTimeout(function () {
  that.setData({
  hideFlag: true
  })
  clearTimeout(time1);
  time1 = null;
 }, 220)//先执行下滑动画,再隐藏模块
 
 },
 //动画 -- 滑入
 slideIn: function () {
 this.animation.translateY(0).step() // 在y轴偏移,然后用step()完成一个动画
 this.setData({
  //动画实例的export方法导出动画数据传递给组件的animation属性
  animationData: this.animation.export()
 })
 },
 //动画 -- 滑出
 slideDown: function () {
 this.animation.translateY(300).step()
 this.setData({
  animationData: this.animation.export(),
 })
 },
 
})

如上,用“// ------------------------------------------modal”隔开的以下的代码可不需要动。

如果一个页面中使用了两个同样效果的弹出框,只需要稍微修改一下就行了,这里就不贴出来。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript异步调用定时方法并停止该方法实现代码
Mar 16 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
使用js画图之饼图
Jan 12 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
微信小程序实现底部弹出框
Nov 18 #Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 #Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 #Vue.js
基于Cesium绘制抛物弧线
Nov 18 #Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 #Vue.js
js实现简易计算器小功能
Nov 18 #Javascript
微信小程序实现购物车功能
Nov 18 #Javascript
You might like
phpmyadmin的#1251问题
2006/11/25 PHP
PHP 模板高级篇总结
2006/12/21 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
jQuery判断元素上是否绑定了指定事件的方法
2015/03/17 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
vue进行图片的预加载watch用法实例讲解
2018/02/07 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
python类装饰器用法实例
2015/06/04 Python
Python选课系统开发程序
2016/09/02 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
如何把python项目部署到linux服务器
2020/08/26 Python
基于python实现坦克大战游戏
2020/10/27 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
戴尔英国官网:Dell英国
2017/05/27 全球购物
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
建筑毕业生自我鉴定
2013/10/18 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
社区交通安全实施方案
2014/03/22 职场文书
好学生评语大全
2014/05/05 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
2015年社区服务活动总结
2015/03/25 职场文书