zoukankan      html  css  js  c++  java
  • 微信 小程序组件 加入购物车全套 one wxml

    <!--pages/shop/shop.wxml-->
    <view wx:if="{{hasList}}">
    <view class="container carts-list">
    <view wx:key="isshop" wx:for="{{carts}}" class="carts-item" >
    <view class="carts-choice">
    <icon wx:if="{{item.selected}}" type="success" color="rgba(255,51,0,1)" size="30" bindtap="bindCheckbox" data-index="{{index}}"/>
    <icon wx:else type="success" color="rgba(255,51,0,0.1)" size="30" bindtap="bindCheckbox" data-index="{{index}}"/>
    </view>
    <view class="carts-image">
    <image src="{{item.image}}"></image>
    </view>
    <view class="carts-text">
    <view class="carts-title">
    <text>{{item.teaname}}</text>
    </view>
    <view class="carts-subtitle">
    <text>¥{{item.price}}</text>
    </view>
    <!-- 加减号控制数量---------------------------------------- -->
    <view class="stepper">
    <!-- 减号 -->
    <text class="{{minusStatuses[index]}}" disabled="true" data-index="{{index}}" bindtap="bindMinus">-</text>
    <!-- 数值 -->
    <!-- <input type="number" bindinput="bindManual" value="{{item.num}}" /> -->
    <view class="number" bindchange="bindManual">{{item.num}}</view>
    <!-- 加号 -->
    <text class="normal" data-index="{{index}}" bindtap="bindPlus">+</text>
    </view>
    </view>
    <view class="delete">
    <view class="delete-img" bindtap="deleteList" data-index="{{index}}">
    <image src="../../imgs/car/shopping_del.png"></image>
    </view>
    </view>
    </view>
    </view>
    <!------------------------------------------ -->
    <!-- 点击结算弹出框 -->
    <!-- <toast show="{{toastHidden}}" bindchange="bindToastChange">
    {{toastStr}}
    </toast> -->
    <!-- 点击结算弹出框 -->
    <!-- <toast show="{{toastHidden}}" bindchange="bindToastChange">
    加载
    </toast> -->

    <!-- 全选和结算---------------------------------------- -->
    <view class="carts-footer">
    <view class="all-chioce">
    <view class="footer-left">
    <icon wx:if="{{selectedAllStatus}}" type="success" color="rgba(255,51,0,1)" size="30" bindtap="bindSelectAll"/>
    <icon wx:else type="success" color="rgba(255,51,0,0.1)" size="30" bindtap="bindSelectAll"/>
    <text>全选</text>
    </view>
    <view class="footer-right">
    <view class="right-text">
    <text>合计</text>
    <text>{{total}}</text>
    </view>
    <view class="free">
    <text>不含运费及优惠</text>
    </view>
    </view>
    </view>
    <view class="button">立即结算</view>
    </view>
    </view>
    <view wx:if="{{!hasList}}" class="">
    <text>购物车为空的时候的布局</text>
    <view class="" bindtap="tobackHome" >返回首页</view>
    </view>




  • 相关阅读:
    浏览器缓存机制
    es6笔记(6) Iterator 和 for...of循环
    es6笔记(3.1)三个点的“...”的作用
    es6笔记(5)Map数据结构
    es6笔记(4) Set数据结构
    SpringBoot事件监听
    SpringBoot入门
    五大常用算法之三贪心算法
    五种常用算法之二:动态规划算法
    五大常用算法之一:分治算法
  • 原文地址:https://www.cnblogs.com/dianzan/p/7519948.html
Copyright © 2011-2022 走看看