微信小程序购物车效果
购物车是一个比较简单的小功能~
购物车功能主要运用了微信小程序的缓存机制,在商品页面将需要添加的数据同步传入缓存中,然后在购物页面通过同步方法拿到对应的数据,最后在页面上进行渲染就可以了。
关键方法
var arrlist = wx.getStorageSync(‘key’) //获取缓存对应key得数据
wx.setStorageSync(‘key’,arrlist) //修改缓存对应key得数据
以下便是购物车页面的详细代码,以供交流参考:
切记要根据自身实际,不要按部就班
wxml部分
<scroll-view class="neirong" scroll-y="true" scroll-with-animation="true">
<block wx:for="{
{goodsCartList}}" wx:key="this">
<view class="carts">
<view class="cartsxq">
<view class="cartsxq_left">
<image src="{
{item.detail.images}}"></image>
</view>
<view class="cartsxq_right">
<view class="pdtnamestyle">{
{item.detail.pdtname}}</view>
<view class="pricestyle">¥{
{item.detail.price}}</view>
<view class="xiaojistyle">金额:{
{item.detail.price*item.count}}</view>
<view class="gongnengdw">
<view class="jian" bindtap="oper" data-type="-" data-index="{
{index}}" >
<image src="/images/jian.png"></image>
</view>
<view class="suliang">{
{item.count}}</view>
<view class="jia" bindtap