无码人妻精一区二区三区,eeuss影院www在线观看,无码精品久久久久久人妻中字,日韩av高清在线看片

微信小程序，這里實(shí)現(xiàn)微信小程序checkbox,有需要此功能的朋友可以參考下。

摘要: 加減商品數(shù)量，匯總價(jià)格，全選與全不選

設(shè)計(jì)思路：

一、從網(wǎng)絡(luò)上傳入以下Json數(shù)據(jù)格式的數(shù)組  1.標(biāo)題title 2.圖片地址 3.數(shù)量num 4.價(jià)格price  5.是否選中selected 

二、點(diǎn)擊復(fù)選框toggle操作 如已經(jīng)選中的，經(jīng)點(diǎn)擊變成未選中，反之而反之 點(diǎn)擊依據(jù)index作為標(biāo)識(shí)，方便遍歷

三、全選操作 首次點(diǎn)擊即為全部選中，再次點(diǎn)擊為全不選，全選按鈕本身也跟隨toggle變換

四、點(diǎn)擊結(jié)算按鈕，將已選中的數(shù)組取出，以供通過網(wǎng)絡(luò)提交到服務(wù)端，這里給個(gè)toast作為結(jié)果演示。

五、利用stepper作加減運(yùn)算，同樣依據(jù)index作為標(biāo)識(shí)，點(diǎn)完寫回num值。

六、布局，全選與結(jié)算按鈕底部對(duì)齊，購(gòu)物車商城自適應(yīng)高度，類似于Android的weight。

步驟：

初始數(shù)據(jù)渲染

1.1 布局與樣式表

上方是一個(gè)商品列表，下方是一個(gè)全選按鈕與立即結(jié)算按鈕

商品列表左部為商品縮略圖，右上為商品標(biāo)題，右下為商品價(jià)格與數(shù)量，

先看一下效果圖：

       

頁面代碼如圖:

<view wx:for="{{carts}}" class="carts-item" data-title="{{item.title}}" data-url="{{item.url}}" bindtap="bindViewTap">
<view class="my-wrap"> <view class="my-tlt">
{{item.title}}
</view>
<view class="my-list bordernone">
<icon wx:if="{{item.selected}}" type="success_circle" size="20" bindtap="bindCheckbox" data-index="{{index}}" class="my-check"/>
<icon wx:else type="circle" size="20" bindtap="bindCheckbox" data-index="{{index}}" class="my-check"/>
<image src="{{item.image}}" class="my-pic" mode="aspectFill"></image>
<view class="my-left">
<view class="my-title"> K金磚玉石電視背景墻磚</view>
<text class="my-txt">尺寸：800X800</text>
<view class="my-bnt">

<!-- 減號(hào) -->
<text class="{{minusStatuses[index]}} bnt" data-index="{{index}}" bindtap="bindMinus">-</text>
<!-- 數(shù)值 -->
<input type="number" bindchange="bindManual" class="int" value="{{item.num}}" />
<!-- 加號(hào) -->
<text class="normal bnt" data-index="{{index}}" bindtap="bindPlus">+</text>]

</view>
</view>
<view class="my-right">
<icon class="iconfont del"/>
<text class="gay">￥{{item.price}}</text>
</view>
</view>
</view>

<view class="float">

<!-- 全選 -->
<view bindtap="bindSelectAll" class="my-sel" >
<icon wx:if="{{selectedAllStatus}}" type="success_circle" size="20" class="l-mycheck"/>
<icon wx:else type="circle" size="20" class="l-mycheck"/>
<text>全選</text>
</view>
<view class="my-rightbox">
<view class="my-count" data='{{sep}}'>

<!-- 統(tǒng)計(jì) -->
合計(jì)（不含運(yùn)費(fèi)）：￥<text>{{count}}</text>
</view>
<view class="my-bnts" bindtap="setPayment" >
結(jié)算（<text>{{number}}</text>）
</view>
</view>
</view>

這里css自己去寫,這里不做多介紹，只做效果：

首先：先定義js

在page.data里面

count:0,
number:0,
minusStatuses: ['disabled', 'disabled', 'normal', 'normal', 'disabled'],
carts: [
{title:'自營(yíng)商城',image:'../images/my.png',num:'1',price:'198.0',selected:false},
{title:'自營(yíng)商城',image:'../images/my.png',num:'1',price:'100.0',selected:false},
{title:'自營(yíng)商城',image:'../images/my.png',num:'3',price:'15.0',selected:false},
{title:'自營(yíng)商城',image:'../images/my.png',num:'2',price:'15.2',selected:false},
{title:'自營(yíng)商城',image:'../images/my.png',num:'1',price:'122.0',selected:true},
]，

carts這個(gè)你可以通過url自己傳參，我這里自己寫點(diǎn)數(shù)據(jù)，

js代碼bindMinus、bindPlus分別改造為如下：

bindMinus: function(e) {
var index = parseInt(e.currentTarget.dataset.index);

var num = this.data.carts[index].num;

if (num > 0) {
num --;
}
var minusStatus = num <= 0 ? 'disabled' : 'normal';
var carts = this.data.carts;
carts[index].num = num;

var minusStatuses = this.data.minusStatuses;
minusStatuses[index] = minusStatus;

this.setData({
carts: carts,
minusStatuses: minusStatuses
});
},
bindPlus: function(e) {
var index = parseInt(e.currentTarget.dataset.index);
var num = this.data.carts[index].num;
num ++;
var minusStatus = num <= 1 ? 'disabled' : 'normal';
var carts = this.data.carts;
carts[index].num = num;

var minusStatuses = this.data.minusStatuses;
minusStatuses[index] = minusStatus;

this.setData({
carts: carts,
minusStatuses: minusStatuses
});
}, 

單選：這里需要判斷一下已選狀態(tài)，一般購(gòu)物車勾選狀態(tài)是記錄在網(wǎng)絡(luò)的。index值用于傳值js，遍歷之用。

bindCheckbox: function(e) {
  var index = parseInt(e.currentTarget.dataset.index);
  var selected = this.data.carts[index].selected;
  var carts = this.data.carts;
var num = parseInt(this.data.carts[index].num);
var price=this.data.carts[index].price;
if(!selected){
this.setData({
count:this.data.count+ num*price,
number:num+this.data.number

});
}else{
this.setData({
count:this.data.count- num*price,
number:this.data.number-num

});
}

  carts[index].selected = !selected;
 
  this.setData({
    carts: carts
  });
},

全選與全不選事件

實(shí)現(xiàn)bindSelectAll事件，改變?nèi)x狀態(tài)

首先定義一個(gè)data值，以記錄全選狀態(tài)

selectedAllStatus: false

事件實(shí)現(xiàn)：

bindSelectAll: function() {
var selectedAllStatus = this.data.selectedAllStatus;
selectedAllStatus = !selectedAllStatus;
var carts = this.data.carts;
if(!selectedAllStatus){
for (var i = 0; i < carts.length; i++) {
carts[i].selected = selectedAllStatus;
var num = parseInt(this.data.carts[i].num);
var price=parseInt(this.data.carts[i].price);
this.setData({
count:this.data.count-num*price,
number:this.data.number-num

});
}
}