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


Posted in Javascript onNovember 22, 2019

电商项目中商品详情页,加入购物车或者下单时可以选择商品属性的弹出框,通过设置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 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
JS对象转换为Jquery对象实现代码
Dec 29 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
Vue.js快速入门教程
Sep 07 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
小程序实现图片预览裁剪插件
Nov 22 #Javascript
Vue数据双向绑定底层实现原理
Nov 22 #Javascript
Node如何后台数据库使用增删改查功能
Nov 21 #Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 #Javascript
微信小程序动态设置图片大小的方法
Nov 21 #Javascript
通过原生vue添加滚动加载更多功能
Nov 21 #Javascript
小程序api实现promise封装过程解析
Nov 21 #Javascript
You might like
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
PHP实现简易图形计算器
2020/08/28 PHP
浅谈javascript的数据类型检测
2010/07/10 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
原生js代码实现图片放大境效果
2016/10/30 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
vue实现购物车列表
2020/06/30 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
pycharm 将django中多个app放到同个文件夹apps的处理方法
2018/05/30 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
在家更换处方镜片:Lensabl
2019/05/01 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
大学生军训广播稿
2014/01/24 职场文书
辩论赛主持词
2014/03/18 职场文书
青春演讲稿范文
2014/05/08 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
python requests模块的使用示例
2021/04/07 Python
python如何正确使用yield
2021/05/21 Python
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
vscode中使用npm安装babel的方法
2021/08/02 Javascript
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript