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

2022-10-06 00:54:07 字數 816 閱讀 7814

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

如下圖所示,實現該按鈕toggle功能。

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

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

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

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

4. 在wxml頁面判斷toggle的值是true/false ,然後修改相應的c程式設計客棧lass名

js**:

page(,

onload:function(options){

var that=this;

api.my_ajax('',function(res){ //用mock.js 設定的模擬資料呼叫格式

// console.log(res);

var listdata=res.data;

for(var i=0;i

wxml**:

使用規格及***

程式設計客棧

erwr43545程式設計客棧gt;

使用規則

就掉粉絲活生生的誰讓他和人文就掉粉絲活生生的誰讓他和人文就掉粉絲活生生的誰讓他和人文

本文標題: 微信小程式實現多個按鈕toggle功能的例項

本文位址: /ruanjian/j**a/193588.html

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

上很多都是只設定乙個按鈕的toggle,所以我現在來稍微總結下 多個按鈕如何實現自身的toggle功能。原理 1,列表展示的時候,我們會用wx for 來迴圈資料,那麼我們就會得到相應的當前的第幾個資料 即 wx key index 2.在每乙個資料裡面新增乙個toggle的屬性,toggle fa...

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

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

微信小程式實現可移動懸浮按鈕(超簡單)

最近被使用者要求再每個頁面顯示乙個懸浮按鈕實現業務,what 雖然內心不願意,但是身體還是得接受。movable area movable view direction all movable view movable area wxss movable area movable view是不是非常...