微信小程序商品详情页底部弹出框（点击加入购物车或立即购买弹出）

项目实现效果如图

项目效果实现思路：

wxml页面设计好底部栏《加入购物车，立即购买》
绑定点击触发弹出层函数
写好弹出窗效果
写好原始页面暗化效果

项目实现代码

1、wxml代码 (其中的showModalStatus变量要现在js代码中的data对象中初始化，初始化为false，因为最初的时候对话框并没有显示)

//点击下面这句话出现底部弹框
<view bindtap="clickme">点击我可以看到底部弹框的出现</view>
<!--屏幕背景变暗的背景  -->
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
<!--弹出框  -->
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">在这里写弹出框里面的布局</view>

1、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、js代码(一般情况下只调用显示对话框的函数，当点击对话框外部的时候，对话框可以消失)

//点击我显示底部弹出框
clickme:function(){this.showModal();
},//显示对话框showModal: function () {// 显示遮罩层var animation = wx.createAnimation({duration: 200,timingFunction: "linear",delay: 0})this.animation = animationanimation.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 = animationanimation.translateY(300).step()this.setData({animationData: animation.export(),})setTimeout(function () {animation.translateY(0).step()this.setData({animationData: animation.export(),showModalStatus: false})}.bind(this), 200)}

微信小程序商品详情页底部弹出框（点击加入购物车或立即购买弹出）相关推荐

微信小程序商品详情页交互源码（选择商品类型切换、预览商品图片）
maker一下自己捣鼓的商品详情页,主要是选择商品类型的交互和样式,点击不同类型切换图片和文字,商品增加减少,还有商品预览图片(本地图片无法预览!!!).. 源码下载:http://download. ...
微信小程序商品详情html,微信小程序关于商品详情类的富文本解析器
微信小程序关于商品详情类的富文本解析器 2020年08月10日 | 萬仟网IT编程 | 我要评论微信小程序关于商品详情类的富文本解析器富文本的解析,在vue中有v-html解析富文本的方法,但是在微 ...
微信小程序新闻服务器,微信小程序新闻网站详情页
扩展运算符的巧妙应用这个template模板,绑定的数据带item前缀那么使用模板的时候,也必须保证是item data帮绑定数据用双花括号包住item 还有wx:for-item默认也是item ...
微信小程序文章详情页跳转案例
前面写了一篇小程序访问公众号文章 https://www.jianshu.com/p/55701760189a 里面所有的文章列表里面都是跳转了同一篇文章链接,那么,如果所有的列表跳转详情页的时候,跳 ...
微信小程序播放详情页，附带：点赞.双击点赞.单击控制视频播放.上下滑动切换视频等功能
<video id="myVideo" src="{{vsrc[vid]}}" danmu-list="{ ...
微信小程序商品详情页面实现三个tab选项卡（商品参数、商品介绍、规格明细）
前段书写 <view class="about"><block wx:for="{{swiperTit ...
微信小程序插件功能页开发详细流程
有问题可以扫码加我微信,有偿解决问题.承接小程序开发. 微信小程序开发交流qq群 173683895 . 526474645 : 正文: 关于新出的微信小程序插件功能页做一下记录,希望能帮到大 ...
微信小程序入门二：底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
手把手教你做短视频去水印微信小程序（2-首页）
手把手教你做短视频去水印微信小程序系列教程(2-首页) 文章目录手把手教你做短视频去水印微信小程序系列教程(2-首页) 前言一.顶部banner 二.地址解析 1.整体代码 2. input框输入 ...

微信小程序商品详情页底部弹出框（点击加入购物车或立即购买弹出）

微信小程序商品详情页底部弹出框（点击加入购物车或立即购买弹出）相关推荐

最新文章

热门文章