微信小程式之實現多個按鈕toggle功能

2022-09-24 01:27:08 字數 357 閱讀 4378

百度上很多都是只設定乙個按鈕的toggle,所以我現在來稍微總結下:多個按鈕如何實現自身的toggle功能。

原理:1,列表展示的時候,我們會用wx:for 來迴圈資料,那麼我們就會得到相應的當前的第幾個資料(即 wx:key="index")

2.在每乙個資料裡面新增乙個toggle的屬性,toggle=false 則不展示,

3.設定乙個點選方法,獲取當前按鈕所在的是第幾個資料,然後將相應的toggle取反,然後將修改後的資料重新寫進去 (我出錯的地方就在這)

4. 在wxml頁面判斷toggle的值是true/false ,然後修改相應的class名

js**:

wxml**:

gyhtr

微信小程式實現多個按鈕toggle功能的例項

微信小程式實現多個按鈕toggle功能的例項 如下圖所示,實現該按鈕toggle功能。上很多都是只設定乙個按鈕的toggle,所以我現在來稍微總結下 多個按鈕如何實現自身的toggle功能。原理 1,列表展示的時候,我們會用wx for 來迴圈資料,那麼我們就會得到相應的當前的第幾個資料 即 wx ...

微信小程式之實現下拉重新整理效果

主要 api 實現 page.js page 獲取新資料 this getdata 網路請求,獲取資料 getdata 頁面相關事件處理函式 監聽使用者下拉動作 onpulldownrefresh function 此外,除了上面的下拉重新整理,有時候可能是在某個事件進行時觸發重新整理動作,此時可以...

微信小程式 浮動按鈕拖動功能

在開發過程中無意間想到了這個功能。一番查詢之後找到這個功能相關的 片段。拷貝過來之後各種報錯,經過自己的整改以可以使用。js 頁面 page 拖動浮動 buttonstart function e buttonmove function e var buttontop this data.butto...