微信小程序-购物车功能

一个简单微信小程序购物车功能
首先感谢王慧永分享的文章,我直接将其中滑动的事件代码直接copy过来的。http://blog.youkuaiyun.com/u011072139/article/details/54692237

购物车展示

通过微信小程序方法
var datas = wx.getStorageSync("cars");
wx.setStorageSync("cars", JSON.stringify(datas));
保存读取数据,
item界面使使用position: absolute;和z-index: 4;实现
下面就直接贴代码了
布局:

<!--pages/sideslipDel/sideslipDel.wxml-->
<view class='container0'>

  <view wx:if='{
   
   {
   
   shoppingcars.length>0}}'>
    <view class='content_top'>
      <text class='content_top_txt_1'>购物车</text>
    </view>

    <view class='content_carts'>
      <block wx:for="{
   
   {
   
   shoppingcars}}" wx:for-index="idx" wx:for-item="item" wx:key="key">
        <view class='shoppingcaritem'>

          <view class='itemContent' bindtap='changeStatus' bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index='{
   
   {
   
   idx}}' style="{
   
   {
   
   item.value.txtStyle}}">
            <view class='car_icon'>
              <icon type='success' color='#d5242a' size='23' wx:if='{
   
   {
   
   item.value.isChecked}}'></icon>
              <icon type='circle' color='#d5242a' size='23' wx:else></icon>
            </view>

            <view class='image'>
              <image src='{
   
   {
   
   item.value.images}}' mode='widthFix'></image>
            </view>
            <view class='detailmess'>
              <view class='text0'>
                <text>{
   
   {
   
   item.value.name}}</text>
              </view>

              <view class='text2'>
                <view class='text2-'>
                  <text class='text2-0'>单价¥</text>
                  <text class='text2-1'>{
   
   {
   
   item.value.price}}</text>
                  <text class='text2-2'>/{
   
   {
   
   item.value.unit}}</text>

                </view>
              </view>

              <view class='add_sub_item'>

                <view class='add_sub'>
                  <image src='../../images/image_sub.png' mode='aspectFit' catchtap='btnSub' data-index='{
   
   {
   
   idx}}' />
                  <view class='add_sub_txt'>

                    <text>{
   
   {
   
   item.value.count}}</text>

                  </view>
                  <image src='../../images/image_add.png' mode='aspectFit' catchtap='btnAdd' data-index='{
   
   {
   
   idx}}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值