微信小程式的開發之二級購物單選 全選功能

2021-08-20 18:40:28 字數 2110 閱讀 7485

所謂的二級購物選擇,先分為二級購物和選擇。二級購物即為連個迴圈列表的套用

wxml

class="checkbox"

wx:for-items="}"

data-value='}'

bindtap="checkboxchange">

class="

}">

text>

value="}"

checked="}"

color='}'

hidden='true'/>

}class='fr'

catchtap='dowmup'

data-value='

}'>

src='../../images/down.png'

hidden='

}'>

image>

class='up'

src='../../images/down.png'

hidden='

}'>

image>

view>

hidden='

}' >

class="checkbox"

wx:for="}"

wx:for-item='list'

data-value='}'

catchtap='childchange'

data-id='

}'>

class="

}">

text>

value="}"

checked="}"

color='}'

hidden='true'/>

}class='fr'

catchtap='dowmup'>

¥ }text>

view>

label>

checkbox-group>

label>

checkbox-group>

wxss
checkbox-group>label

checkbox-group>label>text

label

text

.is_checked

checkbox-group>label>.fr

image

checkbox-group>label>.fr>image

.upcheckbox-group

checkbox-group

checkbox-group

checkbox-group>label

checkbox-group

checkbox-group>label>text

checkbox-group

checkbox-group>label

.frcheckbox-group

checkbox-group>label

.frtext

js
/**

* 頁面的初始資料

*/data: ,

/*** 一級選擇

*/checkboxchange: function (e)

}else

}this.setdata()

},/**

* 二級選擇

*/childchange: function (e) else

this.setdata()

},/**

* 二級顯示

*/dowmup: function (e) )

},/**

* 生命週期函式--監聽頁面載入

*/onload: function (options) ,

method: 'post',

datatype: 'json',

success: function (res) ,

fail: function (res) ,

complete: function (res) ,})}

效果圖

微信小程式 購物車單選,全選,刪除,結算功能

如下,我們要實現購物車的單選,全選,刪除,結算功能 x 全選 結算這裡的勾選圖示我是用本地的,有其它方法可自行修改。index.js function getattr e,key page if goods.count 1 return goods.count this.setdata this.s...

微信小程式開發(二) 雲開發

1 概念 2 傳統小程式開發與雲開發的區別 簡單的呼叫乙個雲函式 求a b的和 獲取當前使用者的openid 小程式雲開發登入方式 使用者通過點選按鈕,從小程式獲取使用者的資訊,而小程式通過雲函式獲得使用者的資訊,雲函式給小程式端返回使用者的openid,小程式獲取到 使用者的資訊之後,將使用者的資...

微信小程式開發框架 WXSS(二)

一 外聯樣式引入 1.wxss除了支援響應式的畫素 還支援外聯樣式的匯入。外聯樣式通過 import標誌符來引入的,外聯樣式好處 當我們不 同頁面內具有相同樣式的元素時可以把,相同樣式的元素處理成外聯樣式檔案,以減少檔案資源的大小。2.如何用 import引入外聯樣式檔案?在index.wxml外聯...