成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

微信小程序的按鈕toogle效果

Seay / 1187人閱讀

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

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

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

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

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

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

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94719.html

相關(guān)文章

  • 微信小程序過長文本折疊效果的探索

    摘要：之前做小程序開發(fā)時，遇到要實現(xiàn)過長文本進行的折疊的效果類型微信朋友圈那種。而最直接的文本過長判斷標(biāo)準(zhǔn)，是文本行數(shù)超過某個值。總結(jié)以上，總結(jié)下小程序下文本過長折疊的思路文本過長由邏輯層判斷字符數(shù)確定，控制全文按鈕的展示與切換。 之前做小程序開發(fā)時，遇到要實現(xiàn)過長文本進行的折疊的效果（類型微信朋友圈那種）。主要交互有三點： 讓文本過長時折疊、并顯示一個全文的點擊文本 當(dāng)用戶點擊全文則會展...

    cocopeak 評論0 收藏0

  • 微信小程序——商城篇

    摘要：微信小程序之跳轉(zhuǎn)在進入商品詳情頁以后，點擊左下角的圖標(biāo)原應(yīng)該跳轉(zhuǎn)到首頁，但是一直點也不跳，而且也不報錯。放下效果圖微信小程序購物車購物車頁面邏輯的話，要按業(yè)務(wù)需求來。 前言 隨著wepy和mpvue的出現(xiàn)及流行，開發(fā)小程序變的越來越便捷和強大，作為基佬社區(qū)的一份子，我們都需要把自己遇到的問題以及如何解決的方式相互分享，這樣才能幫助到更多的朋（ji）友（lao）。如有寫的不足的地方，請各...

    k00baa 評論0 收藏0

  • 第一個自己寫的banner動畫

    摘要：動畫實現(xiàn)滾動文字描述切換的寬度自動切換的時間默認(rèn)是否自動播放返回值，作為清除時延的標(biāo)志位文字介 transition:height .2s ease-in ; /------------------------------動畫實現(xiàn)滾動-------------------------------/ var excursion = -420 ; //文字描述切換的寬度 var ...

    raoyi 評論0 收藏0

  • 當(dāng)微信小程序遇上filter~

    摘要：具體用法其中表示數(shù)組元素的值，表示數(shù)組元素的下標(biāo)，表示包含該元素的數(shù)組。這里采用隨機函數(shù)來獲取數(shù)組的下標(biāo)，函數(shù)是獲取之間的數(shù)，函數(shù)是向下取整，這樣就可以隨機獲取相應(yīng)的下標(biāo)數(shù)。小程序中的模板就很好地幫我們解決了這個問題，并通過屬性來實現(xiàn)調(diào)用。 在微信小程序的開發(fā)過程中，當(dāng)你想要實現(xiàn)不同頁面間的數(shù)據(jù)綁定，卻為此抓耳饒腮時，不妨讓微信小程序與filter 來一場完美的邂逅，相信會給你帶來別樣...

    Darkgel 評論0 收藏0

  • 微信小程序：實現(xiàn)懸浮返回和分享按鈕

    摘要：效果圖數(shù)據(jù)依賴微信小程序接口來完成跳轉(zhuǎn)接口前端處理設(shè)置兩個按鈕。綁定對應(yīng)的事件代碼代碼代碼源碼下載，本文涉及代碼存于文件夾中。 效果圖： showImg(https://upload-images.jianshu.io/upload_images/2731722-32a5e3a892ffd809.gif?imageMogr2/auto-orient/strip); 數(shù)據(jù)： 依賴微信小程...

    siberiawolf 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<