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


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 相关文章推荐
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
Apr 15 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
浅析JS运动
Dec 28 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
js实现简单选项卡制作
Aug 05 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
一个简单的PHP&amp;MYSQL留言板源码
2020/07/19 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
php链式操作的实现方式分析
2019/08/12 PHP
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
jQuery中get()方法用法实例
2014/12/27 Javascript
js去字符串前后空格的实现方法
2016/02/26 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
JS对象创建的几种方式整理
2017/02/28 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
angular4自定义组件详解
2017/09/28 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
Python AES加密模块用法分析
2017/05/22 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
python 实现A*算法的示例代码
2018/08/13 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
2015年营销工作总结范文
2015/04/23 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS