這篇文章主要介紹了微信小程序如何實現多個按鈕toggle功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創新互聯公司制作網站網頁找三站合一網站制作公司,專注于網頁設計,成都網站建設、成都網站設計,網站設計,企業網站搭建,網站開發,建網站業務,680元做網站,已為1000+服務,成都創新互聯公司網站建設將一如既往的為我們的客戶提供最優質的網站建設、網絡營銷推廣服務!

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

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

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

原理：

1，列表展示的時候，我們會用wx:for 來循環數據，那么我們就會得到相應的當前的第幾個數據（即 wx:key="index"）

2.在每一個數據里面添加一個toggle的屬性，toggle=false  則不展示，

3.設置一個點擊方法，獲取當前按鈕所在的是第幾個數據，然后將相應的toggle取反，然后將修改后的數據重新寫進去 (我出錯的地方就在這)

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

js代碼：

Page({ 
 data:{ 
  datas:[] 
 }, 
 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 
           
          使用規則 
          就掉粉絲活生生的誰讓他和人文就掉粉絲活生生的誰讓他和人文就掉粉絲活生生的誰讓他和人文 
         
       
    
感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信小程序如何實現多個按鈕toggle功能”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!
            
            
                        

            分享文章：微信小程序如何實現多個按鈕toggle功能            

            瀏覽路徑：http://www.xueling.net.cn/article/ishdjd.html