今天会接着上一篇开始写商品详情页加入购物车的部分，先看效果：

实现效果1. 商品轮播图片预览 2. 商品收藏效果 3. 加入购物车 4. 商品数量加减 5. 商品数量加减模板（template）编写

商品轮播图片预览效果

detail.js//预览图片 previewImage: (e) { var current = e.target.dataset.src; wx.previewImage({ current: current, // 当前显示图片的http链接 urls: this.data.imgUrls // 需要预览的图片http链接列表 }) }

加入购物车

页面布局分为两部分，第一部分为底部悬浮栏（购物车、收藏、加入购物车、立即购买），第二部分为加入购物车的隐藏布局主要用来选择商品属性和修改商品数量。

detail.wxml<!– 底部悬浮栏 –> <view class=”detail-nav”> <image bindtap=”toCar” src=”../../images/bottomNav/cart.png” /> <view class=”line_nav”></view> <image bindtap=”addLike” src=”{{isLike?’../../images/bottomNav/enshrine_select.png’:’../../images/bottomNav/enshrine.png’}}” /> <button data-goodid=”1″ class=”button-green” bindtap=”toggleDialog” >加入购物车</button> <button class=”button-red” bindtap=”immeBuy” formType=”submit”>立即购买</button> </view><!–加入购物车–> <import src=”../template/template.wxml” /> <view class=”dialog {{ showDialog ? ‘dialog–show’ : ” }}”> <view class=”dialog__mask” bindtap=”toggleDialog” /> <view class=”dialog__container”> <view class=”row”> <icon bindtap=”closeDialog” class=”image-close” type=”cancel” size=”25″/> <image class=”image-sku” src=”https://m.360buyimg.com/n12/jfs/t11317/108/1080677336/325163/f4c2a03a/59fd8b17Nbe2fcca3.jpg!q70.jpg”></image> <view class=”column”> <text class=”sku-price”>￥7935.84</text> <text class=”sku-title”>库存20件</text> <text class=”sku-title”>商品编码：1456778788</text> </view> </view> <text class=”border-line”></text> <view class=”row”> <text >购买数量</text> <view class=”quantity-position”> <template is=”quantity” data=”{{ …quantity1}}” /> </view> </view> <text class=”border-line”></text> <button data-goodid=”1″ class=”button-addCar” bindtap=”addCar” formType=”submit”>确定</button> </view> </view>

detail.js// 立即购买 immeBuy() { wx.showToast({ title: ‘购买成功’, icon: ‘success’, duration: 2000 }); }, /** * sku 弹出 */ toggleDialog: function () { this.setData({ showDialog: !this.data.showDialog }); }, /** * sku 关闭 */ closeDialog: function () { console.info(“关闭”); this.setData({ showDialog: false }); }, /* 减数 */ delCount: function (e) { console.log(“刚刚您点击了减一”); var count = this.data.quantity1.quantity; // 商品总数量-1 if (count > 1) { count -= 1; } // 只有大于一件的时候，才能normal状态，否则disable状态 var delStatus = count <= 1 ? ‘disabled’ : ‘normal’; // 只有大于10件的时候，才能normal状态，否则disable状态 var addStatus = count >= 10 ? ‘disabled’ : ‘normal’; // 将数值与状态写回 this.setData({ quantity1: { quantity: count, delStatus: delStatus, addStatus: addStatus } }); }, /* 加数 */ addCount: function (e) { console.log(“刚刚您点击了加一”); var count = this.data.quantity1.quantity; // 商品总数量-1 if (count < 10) { count += 1; } // 只有大于一件的时候，才能normal状态，否则disable状态 var delStatus = count <= 1 ? ‘disabled’ : ‘normal’; // 只有大于10件的时候，才能normal状态，否则disable状态 var addStatus = count >= 10 ? ‘disabled’ : ‘normal’; // 将数值与状态写回 this.setData({ quantity1: { quantity: count, delStatus: delStatus, addStatus: addStatus } }); }, /* 输入框事件 */ bindManual: function (e) { var count = this.data.quantity1.quantity; // 将数值与状态写回 this.setData({ count: count }); }, /** * 加入购物车 */ addCar: function (e) { console.log(e.target.dataset.goodid); wx.showToast({ title: ‘加入购物车成功’, icon: ‘success’, duration: 2000 }); console.info(“关闭”); this.setData({ showDialog: false }); }, // 收藏 addLike() { this.setData({ isLike: !this.data.isLike }); }, // 跳到购物车 toCar() { wx.switchTab({ url: ‘/pages/cart/cart’ }) }, // 立即购买 immeBuy() { wx.showToast({ title: ‘购买成功’, icon: ‘success’, duration: 2000 }); },

商品数量加减模板（template）

由于后面购物车模块也需要商品数量加减的功能，在这里把这个功能做成了一个template模板，看下方流程：

1、创建template模板

在page目录下创建template文件，并生成template.js、template.json、template.wxml和template.wxss配套文件

2、template.wxml<template name=”quantity”> <!– 主容器 –> <view class=”stepper”> <!– 减号 –> <text class=”{{delStatus}}” bindtap=”delCount”>-</text> <!– 数值 –> <input type=”number” bindchange=”bindManual” value=”{{quantity}}” disabled=”disabled”/> <!– 加号 –> <text class=”{{addStatus}}” bindtap=”addCount”>+</text> </view> </template>

3、template.wxss/*主容器*/ .stepper { width:110px; height: 26px; /*给主容器设一个边框*/ border: 1rpx solid #000000; border-radius: 3px; margin:0 auto; } /*加号和减号*/ .stepper text { width: 24px; line-height: 15px; text-align: center; float: left; } /*数值*/ .stepper input { width: 40px; height: 26px; float: left; margin: 0 auto; text-align: center; font-size: 12px; color: #000000; /*给中间的input设置左右边框即可*/ border-left: 1rpx solid #000000; border-right: 1rpx solid #000000; } /*普通样式*/ .stepper .normal{ color: black; } /*禁用样式*/ .stepper .disabled{ color: #ccc; }

4、detail.wxml样式引用<import src=”../template/template.wxml” />

备注：template是在page目录下

5、detail.js初始化quantity1: { quantity: 1, min: 1, max: 20, delStatus: ‘disabled’, addStatus: ‘normal’ }, isLike: true, showDialog: false,

好了，复制上述代码就可以实现效果哦，赶紧试试吧！

版权声明：本文内容由网友提供，该文观点仅代表作者本人。本站（http://www.zengtui.com/）仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 3933150@qq.com 举报，一经查实，本站将立刻删除。