阅读背景:

微信小程序类似购物车列表效果,计算总共价格数量,加减商品计算,滑动删除

来源:互联网 

先看下效果图:


一个小demo,记录下。

html:

<!--pages/mycollect/mycollect.wxml-->
<!--最外层大盒子  -->
<view class="collect_big_box">
  <!--列表盒子  -->
  <view class="collect_list_box">
    <scroll-view bindscrolltolower="lower" scroll-y="true" style="height: 990rpx;">

      <!--中部搜索结果列表盒子-->

      <view class="recordList_box">
        <!--外层大盒子  -->
        <view class="content_box" wx:for="{{arr}}" wx:key="{{key}}">
          <!--中部盒子  -->
          <view class="view_ce">
            <view style="{{item.txtStyle}}" class="content_box_center" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}">
              <!--图片盒子  -->
              <view class="ProductIco_box">
                <image class="ProductIco" src="{{item.image}}"></image>
              </view>
              <!--内容  -->
              <view class="view_content">
                <view class='view_title'>{{item.title}}</view>
                <view class="view_fl">
                  <text>{{item.sort}}</text>
                  <text>{{item.color}}</text>
                  <!--价格和按钮  -->

                  <view class="view_btn_box">
                    <text>¥ {{item.price}}</text>
                    <!--产品数量不为 0 -->
                    <view class="view_btn" wx:if="{{item.state == 1}}">
                      <view class="view_img_left" bindtap='numminus' data-index="{{index}}">
                        <image src="../../images/[email protected]"></image>
                      </view>
                      <!-- <view class="view_text_center"></view> -->
                      <input class="view_text_center" value="{{item.num}}" bindinput='input_num' data-index="{{index}}"></input>
                      <view class="view_img_right" bindtap='numadd' data-index="{{index}}">
                        <image src="../../images/[email protected]"></image>
                      </view>
                    </view>
                    <!--产品数量为0  -->
                    <view class="view_add" wx:if="{{item.state == 0}}">
                      <view class="view_img_add" bindtap='showadd' data-index="{{index}}">
                        <image src="../../images/[email protected]"></image>
                      </view>
                    </view>
                  </view>


                </view>
              </view>

            </view>
          </view>

          <!--删除按钮  -->
          <view class="delete_btn" bindtap='delete_btn' data-index="{{index}}">删除</view>
        </view>
      </view>

    </scroll-view>
  </view>
  <view class='buy_btn_box'>
    <view class="collect_bottom">
      <view class="collect_right">
        <text class="collect_one">共计{{add_car_num}}件商品</text>
        <text class="collect_two">¥ {{price}}</text>
      </view>
    </view>
    <view class='buy_btn'>
      <text>马上购买</text>
    </view>
  </view>
</view><!--pages/m



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: