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


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 密码强度判断代码
Sep 05 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
微信小程序实现底部弹出框
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
php去除字符串换行符示例分享
2014/02/13 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
php多线程并发实现方法
2016/09/30 PHP
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
2012/05/11 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
详解Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
2017/02/11 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
详解Python中find()方法的使用
2015/05/18 Python
解读python如何实现决策树算法
2018/10/11 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
numpy.array 操作使用简单总结
2019/11/08 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
Django celery异步任务实现代码示例
2020/11/26 Python
演讲稿开场白
2014/01/13 职场文书
保护环境的建议书
2014/03/12 职场文书
浅谈MySQL函数
2021/10/05 MySQL