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


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 相关文章推荐
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
js实现本地图片文件拖拽效果
Jul 18 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 Javascript
js实现筛选功能
Nov 24 Javascript
浅谈node.js中间件有哪些类型
Apr 29 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
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
读jQuery之十 事件模块概述
2011/06/27 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
印度低票价航空公司:GoAir
2017/10/11 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
中专生求职自荐信范文
2013/12/22 职场文书
网络研修随笔感言
2014/02/17 职场文书
售房协议书
2014/08/19 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
出差报告怎么写
2014/11/06 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
2016年端午节寄语
2015/12/04 职场文书
教你使用pyinstaller打包Python教程
2021/05/27 Python
Spring Boot实现文件上传下载
2022/08/14 Java/Android