微信小程序的按鈕toogle效果

Seay 發(fā)布于2019-08-22 16:57 / 1176人閱讀

摘要：但是我們又要實(shí)現(xiàn)，連續(xù)點(diǎn)擊兩次同一個(gè)按鈕時(shí)，這個(gè)一級(jí)菜單有效果，如果像上面那樣把恢復(fù)初始值，就不能實(shí)現(xiàn)效果。這時(shí)的兩個(gè)數(shù)組的完全獨(dú)立的。

創(chuàng)建一個(gè)公用的導(dǎo)航navBar組件，讓它可以在所有頁面使用，比如在index.wxml,引用navBar組件，方法如下

1.在需要引用組件的頁面中的json中定義這個(gè)組件

//index.json
{
  "usingComponents": {
    "nav-bar": "/component/navBar/navBar"http://自定義組件的名稱，組件的路徑
  }
}

2.在需要引用組件組件的頁面中的wxml中引用這個(gè)組件

//index.wxml

3.在組件的json文件中“開啟組件”

//navBar.json
{
  "component": true
}

4.組件navBar.wxml內(nèi)部的代碼

//navBar.wxml
我是navBar


    {{item.name}}
    
      
      
        
          
          
              {{todo.msgName}}
           
          
          {{todo.msgName}}

5.組件的wxss

//簡單的樣式，沒什么好說的
.test{
  float: left;
  width: 200rpx;
  height:60rpx;
  line-height: 60rpx;
  text-align: center;
  border:1px solid;
}

6.在組件的js中定義的數(shù)據(jù)和方法

//navBar.js

function statusList() {//定義在組件外部的函數(shù)，為了讓內(nèi)部的函數(shù)每次能夠重新調(diào)用
  return [false, false, false];
}
Component({
  /**
   * 組件的屬性列表
   */
  properties: {

  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    status: statusList(),//調(diào)用一次外部函數(shù)
    btnChildrenArray: [
      {
        id: 0,
        name: "按鈕一",
        msg: [
          {
            id: 10,
            msgName: "000",
            url: "/aa"
          },
          {
            id: 20,
            msgName: "111",
            url: "/bb"
          },
          {
            id: 30,
            msgName: "222",
            url: "/ccaa"
          }
        ]
      },
      {
        id: 1,
        name: "按鈕二",
        msg: [
          {
            id: 11,
            msgName: "999",
            url: "/aa"
          },
          {
            id: 12,
            msgName: "111",
            isContact: true
          },
          {
            id: 13,
            msgName: "222",
            url: "/aa"
          }
        ]
      },
      {
        id: 2,
        name: "按鈕三",
        status: false,
        msg: [
          {
            id: 21,
            msgName: "888",
            url: "/aa"
          },
          {
            id: 22,
            msgName: "111",
            url: "/aa"
          },
          {
            id: 23,
            msgName: "test",
            methods: "test1"
          }
        ]
      },
    ]
  },

  /**
   * 組件的方法列表
   */
  methods: {
    test1: function () {//data中methods屬性的值對應(yīng)的函數(shù)
      console.log("test1234")
    },
    clickTest: function (e) {
      var index = parseInt(e.currentTarget.dataset.index)//可以console.log(e)查看到獲取每次點(diǎn)擊的索引值
      var listData = this.data.status//這是定義在data中的數(shù)組,第一次點(diǎn)擊時(shí)為外部函數(shù)返回的數(shù)組
      //當(dāng)點(diǎn)擊第二次的時(shí)候,這里的數(shù)組值為上一次存儲(chǔ)的值(setData方法),即某一個(gè)被改變了的值的數(shù)組
      var newStatusList = statusList()//這是調(diào)用外部函數(shù)，返回的數(shù)組
      //第二次點(diǎn)擊之后,重新變?yōu)槿慷际莊alse,重點(diǎn)就在這里,每次返回的都是新的數(shù)組,即三個(gè)false
      if (listData[index] === false) {//我們要判斷的數(shù)組值的這個(gè)數(shù)組，一定是data中定義的數(shù)組，即listData，不會(huì)判斷外部函數(shù)返回的數(shù)組。因?yàn)閚ewStatusList，這是每執(zhí)行一次點(diǎn)擊事件，都會(huì)重新調(diào)用外部函數(shù)，所以每一次走到這里時(shí)，它的值都是固定的值，都是外部函數(shù)返回的值。而data中的status只會(huì)調(diào)用一次外部函數(shù)，所以，他的值時(shí)相對固定的，不會(huì)再被外部函數(shù)改變
        newStatusList[index] = true//此時(shí)改變內(nèi)部調(diào)用函數(shù)所返回的數(shù)組，如果改變的是listData，那下面的setData也要改成listData，這時(shí)如果第二次的index值不一樣，那么status里第一次被更改的值無法被恢復(fù)，所以這也是有兩個(gè)數(shù)組，且其中一個(gè)是每一次都會(huì)恢復(fù)默認(rèn)值得原因
      } else {
        //console.log("haha")
      }
      this.setData({
        status: newStatusList//status等于方法返回的數(shù)組(即被改變的數(shù)組)
      })
      //console.log(newStatusList)
      //console.log(status)
    },
  }
})

這里面的點(diǎn)擊toogle效果的主要實(shí)現(xiàn)過程，首先設(shè)置下拉的部分全部wx:if="status[index]"，status數(shù)組中的每一項(xiàng)都為false，根據(jù)點(diǎn)擊的index值，判斷數(shù)組中索引為index的的項(xiàng)的值為是否為false，改寫為true，即可渲染出下拉部分。

我們要實(shí)現(xiàn)第二次點(diǎn)擊其他一級(jí)菜單的時(shí)候，第一次展開的一級(jí)菜單下的目錄全部隱藏，只渲染當(dāng)前一級(jí)菜單下的目錄，就要在每第二次點(diǎn)擊的時(shí)候，讓status的每一項(xiàng)的值恢復(fù)為默認(rèn)的全部為false的狀態(tài)，然后再改變當(dāng)前點(diǎn)擊的index索引對應(yīng)的status數(shù)組中的值。

但是我們又要實(shí)現(xiàn)，連續(xù)點(diǎn)擊兩次同一個(gè)按鈕時(shí)，這個(gè)一級(jí)菜單有toggle效果，如果像上面那樣把status恢復(fù)初始值，就不能實(shí)現(xiàn)toggle效果。

所以這個(gè)時(shí)候，需要兩個(gè)數(shù)組，為了方便，可以在外部新建一個(gè)函數(shù)，返回一個(gè)數(shù)組，比如statusList()函數(shù)返回?cái)?shù)組，在data中的status屬性調(diào)用一次函數(shù)，此時(shí)可以在點(diǎn)擊事件內(nèi)部定義一個(gè)變量newStatusList，重新調(diào)用一次外部的函數(shù)，返回另一個(gè)數(shù)組。這時(shí)的兩個(gè)數(shù)組的完全獨(dú)立的。然后如果當(dāng)前點(diǎn)擊索引的值是否為false，就改變newStatusList的值，最后把newStatusList賦值給data中的status屬性；如果為true，因?yàn)榇藭r(shí)的點(diǎn)擊事件內(nèi)部會(huì)再一次調(diào)用外部函數(shù)statusList()，所以newStatusList得值會(huì)被恢復(fù)為初始狀態(tài)，所以對應(yīng)的true，會(huì)被改寫成false，從而實(shí)現(xiàn)了toogle效果

具體的過程可以看上面的注釋