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


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 相关文章推荐
用函数式编程技术编写优美的 JavaScript_ibm
May 16 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
node.js中cluster的使用教程
Jun 09 Javascript
详解Puppeteer 入门教程
May 09 Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
vue中的ref和$refs的使用
Nov 22 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
微信小程序实现选项卡滑动切换
Oct 22 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
什么是短波收听SWL
2021/03/01 无线电
php从字符串创建函数的方法
2015/03/16 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
JScript的条件编译
2007/05/29 Javascript
javascript常用函数归纳整理
2014/10/31 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
[03:15]DOTA2-DPC中国联赛1月22日Recap集锦
2021/03/11 DOTA
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
python中安装模块包版本冲突问题的解决
2017/05/02 Python
人机交互程序 python实现人机对话
2017/11/14 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
python抖音表白程序源代码
2019/04/07 Python
Python中Unittest框架的具体使用
2019/08/27 Python
python手写均值滤波
2020/02/19 Python
最小二乘法及其python实现详解
2020/02/24 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
交通事故赔偿协议书
2014/04/15 职场文书
学雷锋月活动总结
2014/04/25 职场文书
趣味运动会策划方案
2014/06/02 职场文书
房屋所有权证明
2014/10/20 职场文书
小学优秀班主任材料
2014/12/17 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers