微信小程序购物车弹出层

https://www.jianshu.com/p/a0c2c8712dab 微信小程序购物车数量加减功能

wxml:

<!--index.wxml-->
<button bindtap="showCart">按钮</button><!--遮罩-->
<view class='mask' hidden='{{mask}}' catchtap='hideAllBox'></view>
<!--购物车弹窗-->
<view class='lay-box detail-cart {{!cartBox ? "on" : ""}}'><view class='box-cart-title'><image src="{{data.item_img[0][0]}}" class='box-img'></image><view class='price-box'><!--价格库存--><view class='price'>￥9.8</view><view class="sales">库存(99)</view><!--右上角关闭按钮--><text class='lay-close' bindtap='showCart'>×</text></view></view><scroll-view scroll-y class='box-content'><!-- 单规格选择 --><view wx:if='{{danguige}}' class='box-spec'><view class='cor-grey'>规格</view><view class='spec-items'><!--规格列表--><view class='spec-item {{specActive == item.id ? "on" : ""}}' wx:for="{{guigelist}}" wx:key="*this" data-gui_id="{{item.id}}" data-item_id="{{item.item_id}}" data-price="{{item.price}}" data-inventory="{{item.inventory}}" data-limit="{{item.limit_number}}" bindtap="OneSelectSpec">{{item.guige}}</view></view></view><!--多规格-多属性选择--><view wx:if='{{duoguige}}' class='box-spec' wx:for="{{data.sku_list}}" wx:key="*this" wx:for-index="boxindex"><view class='cor-grey'>{{item.name}}</view><view class='spec-items'><!--属性列表--><button class='spec-item {{attr.isHasSpec ? "on" : ""}} {{attr.isCould ? "" : "grey"}}' disabled="{{!attr.isCould}}" wx:for="{{item.list}}" wx:for-item="attr" wx:key="*this" data-gui_id="{{attr.id}}" data-item_id="{{attr.sp_value_id}}" data-num="{{attr.num}}" data-index="{{boxindex}}" data-index_x="{{index}}" data-attr="{{attr}}" data-spname="{{attr.sp_value_name}}" bindtap="selectSpec">商品</button></view></view><!--选择数量--><view class='updown-box jus-b ali-c'><view class='cor-grey'>数量</view><!--商品数量加减按钮--><view class='updown flexc'><!--减--><view class='down' hover-class='button-hover' bindtap='reduceNumber'><text>-</text></view><!--输入框--><input type='number' class='nums' value='{{goodsNumber}}' bindinput="inputValueChange"></input><!--加--><view class='up' hover-class='button-hover' bindtap='addNumber'><text>+</text></view></view></view></scroll-view><view class='box-btn' bindtap='cartBoxClick'>确定</view>
</view>

js:

//index.js
//获取应用实例
const app = getApp()Page({data: {//商品数量goodsNumber: 9,minusStatus: 'disabled',//遮罩层显示状态mask: true,//购物车弹窗显示隐藏cartBox: true,//单规格danguige: true,//多规格duoguige: false,guigelist: [{id: 1,guige: '白色'},{id: 2,guige: '红色'},{id: 1,guige: '黑色'}]},//事件处理函数onLoad: function () {},showCart() {this.setData({cartBox: !this.data.cartBox, //显示隐藏购物车弹窗mask: !this.data.mask, //显示隐藏遮罩层});},//点击遮罩层隐藏弹窗hideAllBox() {this.setData({//遮罩层隐藏mask: true,//产品参数弹窗隐藏paramsBox: true,//购物车弹窗隐藏cartBox: true,//选择规格弹窗隐藏choice: true,})},/* 点击减号 */reduceNumber: function () {var num = this.data.goodsNumber;// 如果大于1时，才可以减  if (num > 1) {num--;}// 只有大于一件的时候，才能normal状态，否则disable状态  var minusStatus = num <= 1 ? 'disabled' : 'normal';// 将数值与状态写回  this.setData({goodsNumber: num,minusStatus: minusStatus});},/* 点击加号 */addNumber: function () {var num = this.data.goodsNumber;// 不作过多考虑自增1  num++;// 只有大于一件的时候，才能normal状态，否则disable状态  var minusStatus = num < 1 ? 'disabled' : 'normal';// 将数值与状态写回  this.setData({goodsNumber: num,minusStatus: minusStatus});},/* 输入框事件 */inputValueChange: function (e) {var num = e.detail.value;// 将数值与状态写回  this.setData({goodsNumber: num});}})

wxss:

/**index.wxss**/
#app {position: relative;
}page {background: #f1f1f1;height: 100%;
}.mask {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;z-index: 5;background: rgba(0, 0, 0, 0.5);
}/*价格信息*/.goods-name .goname-title {width: 600rpx;
}/*承诺保障弹窗骨架*/
.lay-box {position: fixed;bottom: 0;left: 0;width: 100vw;background: #fff;z-index: 100;}.lay-box {transform: translate(0, 100%);transition: all 0.3s ease-in;
}.lay-box.on {transform: translate(0, 0);
}.detail-laybox .box-title {height: 88rpx;line-height: 88rpx;text-align: center;font-size: 28rpx;border-bottom: 1px solid #e5e5e5;
}.box-content {max-height: 500rpx;
}.detail-laybox .no-params {padding: 30rpx;text-align: center;color: #666;
}.detail-laybox .box-btn,
.detail-cart .box-btn {height: 88rpx;line-height: 88rpx;text-align: center;background: #f13130;color: #fff;font-size: 30rpx;
}/*购物车弹窗*/
.detail-cart .box-cart-title {padding: 20rpx;display: flex;border-bottom: 1px solid #e5e5e5;
}.detail-cart .box-cart-title .box-img {width: 190rpx;height: 190rpx;border-radius: 10rpx;margin-top: -60rpx;margin-right: 20rpx;
}.detail-cart .box-cart-title .price-box {flex: 1;position: relative;
}.detail-cart .box-cart-title .price-box .price {font-weight: bold;font-size: 32rpx;color: #f00;
}.detail-cart .box-cart-title .price-box .sales {color: #888;
}.detail-cart .box-cart-title .price-box .lay-close {position: absolute;right: 0;top: 0;width: 28rpx;height: 28rpx;
}.detail-cart .box-spec {padding: 20rpx;border-bottom: 1px solid #ddd;
}.detail-cart .box-spec .spec-items {display: flex;flex-wrap: wrap;padding-right: -40rpx;margin-top: 12rpx;
}.detail-cart .box-spec .spec-items button {margin-left: 0;
}.detail-cart .box-spec .spec-items button::after {border: 0;
}.detail-cart .box-spec .spec-item {height: 50rpx;line-height: 46rpx;padding: 0 20rpx;font-size: 26rpx;margin-right: 20rpx;margin-bottom: 20rpx;border: 2rpx solid #e5e5e5;border-radius: 6rpx;background-color: #fff;color: #000;
}.detail-cart .box-spec .spec-item.on {color: #ff5000;border-color: #ff5000;
}.detail-cart .box-spec .spec-items button.on {color: #ff5000;border-color: #ff5000;
}.detail-cart .box-spec .spec-item.grey {background: #f1f1f1;
}.updown-box {padding: 20rpx;border-top: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;display: flex;align-items: center;justify-content: space-between;
}/*数量加减*/
.updown {border: 1px solid #e5e5e5;border-radius: 6rpx;overflow: hidden;height: 70rpx;display: flex;width: 200rpx;font-size: 40rpx;align-items: center;
}.updown .up,
.updown .down {width: 70rpx;display: flex;justify-content: center;align-items: center;height: 100%;
}.updown .up {border-left: 1rpx solid #e5e5e5;
}.updown .down {border-right: 1rpx solid #e5e5e5;
}.updown .nums {width: 80rpx;text-align: center;height: 100%;display: inline-block;font-size: 30rpx;
}

微信小程序购物车弹出层相关推荐

微信小程序无法弹出授权登录窗口
微信小程序开发,小程序接口问题..... 今天在写微信小程序的时候,为了获取到后台的token,必须要获取到code,encryptedData,iv ,rawData,signature五个值.co ...
微信小程序自定义弹出框组件，模拟wx.showModal
微信小程序开发交流qq群 173683895 效果图: 代码 wxml <view wx:if='{{showModal}}'><view class='mask_layer' ...
微信小程序input弹出键盘挡住文字的解决办法
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 解决思路:阻止键盘弹起时,自动上推页面.输入框获取焦点的时候让页面绝对定位,相对底部 100 像素.失去焦点的 ...
微信最新授权登录微信小程序无法弹出授权弹框 open-type getUserInfo获取不到用户信息授权不弹框
解决办法使用getUserProfile接口 !!!! 大大的坑啊,调试了半天 getUserProfile(e) {// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接 ...
微信小程序—自定义弹出式键盘（车牌键盘、十六进制键盘），可快速定义不同场景键盘
摘要小程序input组件提供的键盘有四种(text-文本.number-数字.idcard-身份证.digit-小数点),但输入场景万千,很多情况下都需要排除不必要的干扰,比如车牌输入.色值输入,或 ...
微信小程序自定义弹出模态框禁止底部滚动
图示: wxml代码: <view class='fix_bottom'> <view>分享</view> <view>电话咨询</view> ...
微信小程序vantweapp-Dialog弹出框提交表单，并还原确定按钮样式
vantweapp中Dialog弹出框使用组件调用,怎么将form表单的提交按钮与Dialog弹出框相结合呢解决方案: wxml代码 <van-dialoguse-slottitle=&quo ...
微信小程序之弹出提示框确认取消按钮以及在该api内的方法中不能使用setData的问题！
首先,我们来介绍一下弹出提示框: wx.showModal({title: '提示',content: '这是一个模态弹窗',success (res) {if (res.confirm) {cons ...
微信小程序自定义弹出框
网上搜了一下感觉都没有好用的自定义弹框就自己手写了一个,方便以后CV 弹框可以点击按钮关闭,也可以点击空白关闭代码很简单 wxml <view bindtap="submit&quo ...

微信小程序购物车弹出层

微信小程序购物车弹出层相关推荐

最新文章

热门文章