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


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 相关文章推荐
根据出生日期自动取得星座的js代码
Jul 20 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
May 24 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
浅谈Vue数据响应思路之数组
Nov 06 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
分享PHP入门的学习方法
2007/01/02 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
React Router V4使用指南(精讲)
2018/09/17 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
Python 比较两个数组的元素的异同方法
2017/08/17 Python
python3中函数参数的四种简单用法
2018/07/09 Python
python 字典套字典或列表的示例
2019/12/16 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
SQL Server笔试题
2012/01/10 面试题
英文留学推荐信范文
2014/01/25 职场文书
安全教育月活动总结
2014/05/05 职场文书
食堂标语大全
2014/06/11 职场文书
前台接待员岗位职责
2015/04/15 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
你会写请假条吗?
2019/06/26 职场文书
Tomcat配置访问日志和线程数
2022/05/06 Servers