要实现这样的效果并不困难，需要自己思路清晰，不能被绕进去了。实现加入购物车并不难，细节是购物车图标右上角的数字要根据加入购物车的数量进行动态的改变，还要注意如果是同一件商品就不需要添加新的，只需要修改原来的数量。
在这里我使用的是小程序的wx.setStorage()实现的：
<view> <view bindtap="addCart">加入购物车</view> <view bindtap="buy">立即购买</view> </view>
addCart() { // 加入购物车 this.setData({ toastData: { // toast需要的参数 icon: "success", info1: "加入购物车成功", top: "50%" } }) this.toast.showToast() this.toast.hideToast() this.hideModal() // 真正实现添加购物车的部分 let cartData = wx.getStorageSync('cart') || []; let count = 0 cartData.map(val => { if (val.title === this.data.currData[0].title && val.type === this.data.choose_value) { val.num += this.data.num count++ // 标记是否有找到相同的商品 } }) if (count === 0) { // 没找到 添加新的商品信息进购物车 let data = { id: this.data.currData[0]._id, title: this.data.currData[0].title, weight: "0.78kg", type: this.data.choose_value, num: this.data.num, price: this.data.currData[0].plain_price, img: this.data.currData[0].thumb, discount: 20, select: true // 是否选中，方便后续计算总价 } cartData.push(data) } // 刷新购物车图标上的数量 let allNum = 0 cartData.forEach(val => { allNum += val.num }); this.setData({ allNum }) wx.setStorage({ key: 'cart', data: cartData }) },
这里你可以根据自己的开发来决定方式，如果你使用的是云开发的话，可以选择把数据存进云数据库里。
回到顶部
这也是一个老生常谈的功能，当你滑到页面比较后的位置的时候需要快速回顶。这里要记住，用swiper实现。首先是在页面上撸一个回到顶部的图标出来：
<!-- 滑动一段距离后显示返回顶部的按钮 --> <scroll-view scroll-y="true" scroll-top="{{scrollTop}}" bindscroll="scroll"> <view bindtap="goTop" wx:if="{{&& floorstatus}}"> <image src=""></image> </view> </scroll-view>
{{scrollTop}}用来表示滑动的时候距离顶部的位置。它的样式也很简单，使用固定定位把它定在屏幕上，这里一定要注意页面的层级，不然它可能会被其他组件给遮挡掉！
/* 回到顶部 */ .goTop { position: fixed; bottom: 200rpx; right: 20rpx; width: 65rpx; height: 65rpx; border: 1px solid #DDDDDD; border-radius: 50%; background-color: #fff; text-align: center; } .icon_goTop { width: 40rpx; height: 40rpx; padding-top: 12rpx; padding-left: 2rpx; }
goTop(e) { // 回到顶部 this.setData({ scrollTop: 0 }) }
你肯定也注意到了，当滑到了一定距离的时候它才显示出来，这就要靠swiper绑定的滚动事件了：
scroll(e) { // 滚动事件 // 容器滚动时将此时的滚动距离赋值给 this.data.scrollTop let floorstatus = false if (e.detail.scrollTop > 300) { floorstatus = true } this.setData({ floorstatus }) }
功能大致先说这么一点，可能在大牛看起来都是些很容易不起眼的功能，但是对应我这个初学者来说还是有点困难的，希望如果有大牛看了我的一些功能的实现之后我不会被骂死。
值得注意的一点
做过小程序开发或者是vue等开发的人一定听过事件冒泡这个名词：子元素的事件触发了父元素的事件，例如点击事件。我就是那个幸运鹅，我在开发的时候就遇到了这个情况。
在购物车中点击商品可以跳转商品详情，但是我一开始把跳转事件绑定在了每个商品卡片上，这样就导致了点击修改商品数量的时候修改了数字但是也会直接跳转商品详情，比如下面这样...
这就很不友好了，用户体验很差，关于事件冒泡，微信小程序的解决方法是把bindtap替换成catchtap，这样可以阻止子元素事件向上冒泡。
然而巧的是，我就是那个最幸运的鹅，步进器我用的是有赞Vant Weapp组件库里的，我搜索了很多资料都没有找到有效的解决方案，差点就放弃使用组件库了，好在最后发现京东优选小程序购物车绑定的跳转事件是在商品的图片和标题上。
这一点还是比较重要的，所以大家在开发的时候一定要考虑事件的冒泡，这也是我把它放在最后来写的原因。
写在后面