小程式:點選複選框改變繫結的標籤樣式
阿新 • • 發佈:2018-12-10
這是一篇嘔心瀝血的小程式教程
從昨天下午到現在才弄明白的實現方法 如果你有更好的方法 請分享給我吧~
需求是這樣的 哪個被選中就改變哪個的樣式 我放的明明是動態圖 但是它不動我也沒辦法
正常來說這個用jq來做是非常簡單的
但是小程式中沒辦法操作Dom 所以這個過程就邊的複雜了起來
開始實現步驟!
這是html的程式碼
checkbox-group這個標籤是用來來繫結複選框的
bindchange是小程式自帶的方法 用來監聽複選框的選中狀態 裡面繫結的方法在js中
這裡的重點是wx:for繫結的陣列和{{item.checked?’is_checked’:’ ‘}}這段三目運算子 下面會用到
這個三目運算子的結構是:{{ 陣列中的checked是否為true ?“true新增名稱為is_checked的class” : “ 否則返回空”}}
這是Js中的程式碼
首先要在data中定義一個空的陣列用 我這裡定義的名稱為isChecked
這裡就是剛剛繫結的方法啦 我都有標註釋
this.setData是小程式更新資料的方法
說明一下 我這裡的資料是後臺傳過來的 本來是沒有checked這個欄位的
if中判斷後要做的事就是將這個checked欄位新增到isChecked陣列中
為了不影響原來的資料才定義了新的陣列
最後給is_checked這個class新增樣式就可以了