电商项目中商品详情页,加入购物车或者下单时可以选择商品属性的弹出框,通过设置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()
为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“微信小程序商品详情页底部弹出框”评论...
更新动态
2024年05月15日
2024年05月15日
- 韩红/陈萨《沉默的光影》[320K/MP3][101.74MB]
- 吳雨霏.2015-霏凡精选2CD【金牌大风】【WAV+CUE】
- 丁欣睿.2023-宜享受太阳雨【StreetVoice】【FLAC分轨】
- 群星.1993-宝丽金真的爱你3CD【宝丽金】【WAV+CUE】
- dnf110满级后平民去哪打装备
- dnf110自定义史诗和固定史诗区别
- dnf110自定义史诗有几件
- 张国荣1979-情人箭[Polydor][APE+CUE]
- KOKIA-歌か?チカラ(2004K2HD2015mora)[96-24]FLAC
- 松田聖子SeikoMatsuda《SEIKOJAZZ1》2017[WAV]
- 玩家发现《剑星》独特动画:出现概率极低!
- 消息称百度董事长李彦宏亲自开除璩静:对其非常生气
- 《纸片马里奥RPG重置版》新预告公开 5月23日发售
- 翁立友.2010-男性的坚持经典集【豪记】【WAV+CUE】
- 常宽.1994-宽【华星】【WAV+CUE】