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


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 相关文章推荐
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
table行随鼠标移动变色示例
May 07 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
Javascript中replace()小结
Sep 30 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
js实现二级联动简单实例
Jan 11 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
小程序实现图片预览裁剪插件
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封装的验证码类分享
2017/02/26 PHP
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
2006/10/17 Javascript
javascript 面向对象编程 function也是类
2009/09/17 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
Python实现将xml导入至excel
2015/11/20 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
python 实现dict转json并保存文件
2019/12/05 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
python识别验证码的思路及解决方案
2020/09/13 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
大码女装:Ulla Popken
2019/08/06 全球购物
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
物业经理自我鉴定
2014/03/03 职场文书
个人安全承诺书
2014/05/22 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
简爱读书笔记
2015/06/26 职场文书
Python实现单例模式的5种方法
2021/06/15 Python
ant design vue的form表单取值方法
2022/06/01 Vue.js