微信小程序商品详情页的底部弹出框效果


Posted in Javascript onNovember 16, 2020

电商项目中商品详情页,加入购物车或者下单时可以选择商品属性的弹出框,通过设置view的平移动画,达到从底部弹出的样式

1.js代码(一般情况下只调用显示对话框的函数,当点击对话框外部的时候,对话框可以消失)

//显示对话框
 showModal: function () {
 // 显示遮罩层
 var animation = wx.createAnimation({
  duration: 200,
  timingFunction: "linear",
  delay: 0
 })
 this.animation = animation
 animation.translateY(300).step()
 this.setData({
  animationData: animation.export(),
  showModalStatus: true
 })
 setTimeout(function () {
  animation.translateY(0).step()
  this.setData({
  animationData: animation.export()
  })
 }.bind(this), 200)
 },
 //隐藏对话框
 hideModal: function () {
 // 隐藏遮罩层
 var animation = wx.createAnimation({
  duration: 200,
  timingFunction: "linear",
  delay: 0
 })
 this.animation = animation
 animation.translateY(300).step()
 this.setData({
  animationData: animation.export(),
 })
 setTimeout(function () {
  animation.translateY(0).step()
  this.setData({
  animationData: animation.export(),
  showModalStatus: false
  })
 }.bind(this), 200)
 }

2.wxss代码

/*使屏幕变暗 */
.commodity_screen {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 opacity: 0.2;
 overflow: hidden;
 z-index: 1000;
 color: #fff;
}
/*对话框 */
.commodity_attr_box {
 height: 300rpx;
 width: 100%;
 overflow: hidden;
 position: fixed;
 bottom: 0;
 left: 0;
 z-index: 2000;
 background: #fff;
 padding-top: 20rpx;
}

3.wxml代码 (其中的showModalStatus变量要现在js代码中的data对象中初始化,初始化为false,因为最初的时候对话框并没有显示)

<!--屏幕背景变暗的背景 -->
 <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
 <!--弹出框 -->
 <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">在这里写弹出框里面的布局</view>

4.设置点击事件,给目标view设置点击函数showModal()或者hideModal()

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

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

Javascript 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
JS复制到剪贴板示例代码
Oct 30 Javascript
js使用ajax读博客rss示例
May 06 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
vue-cli3.0配置及使用注意事项详解
Sep 05 Javascript
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
你点的 ES6一些小技巧,请查收
Apr 25 #Javascript
vue 组件使用中的一些细节点
Apr 25 #Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 #Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 #Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 #Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 #Javascript
详解Vue.js中.native修饰符
Apr 24 #Javascript
You might like
如何删除多级目录
2006/10/09 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
Python实现名片管理系统
2020/02/14 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
python 爬虫请求模块requests详解
2020/12/04 Python
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
村优秀党员事迹材料
2014/01/15 职场文书
护士自我评价范文
2014/01/25 职场文书
八项规定整改措施
2014/02/12 职场文书
保证书范文大全
2014/04/28 职场文书
小学校长先进事迹材料
2014/05/13 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
大学生个人学年总结
2015/02/15 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
培训简讯范文
2015/07/20 职场文书
升学宴祝酒词
2015/08/11 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技