微信小程序的按鈕toogle效果

Seay 發布于2019-08-22 16:57 / 1183人閱讀

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

創建一個公用的導航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內部的代碼

//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中定義的數據和方法

//navBar.js

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

  },

  /**
   * 組件的初始數據
   */
  data: {
    status: statusList(),//調用一次外部函數
    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屬性的值對應的函數
      console.log("test1234")
    },
    clickTest: function (e) {
      var index = parseInt(e.currentTarget.dataset.index)//可以console.log(e)查看到獲取每次點擊的索引值
      var listData = this.data.status//這是定義在data中的數組,第一次點擊時為外部函數返回的數組
      //當點擊第二次的時候,這里的數組值為上一次存儲的值(setData方法),即某一個被改變了的值的數組
      var newStatusList = statusList()//這是調用外部函數，返回的數組
      //第二次點擊之后,重新變為全部都是false,重點就在這里,每次返回的都是新的數組,即三個false
      if (listData[index] === false) {//我們要判斷的數組值的這個數組，一定是data中定義的數組，即listData，不會判斷外部函數返回的數組。因為newStatusList，這是每執行一次點擊事件，都會重新調用外部函數，所以每一次走到這里時，它的值都是固定的值，都是外部函數返回的值。而data中的status只會調用一次外部函數，所以，他的值時相對固定的，不會再被外部函數改變
        newStatusList[index] = true//此時改變內部調用函數所返回的數組，如果改變的是listData，那下面的setData也要改成listData，這時如果第二次的index值不一樣，那么status里第一次被更改的值無法被恢復，所以這也是有兩個數組，且其中一個是每一次都會恢復默認值得原因
      } else {
        //console.log("haha")
      }
      this.setData({
        status: newStatusList//status等于方法返回的數組(即被改變的數組)
      })
      //console.log(newStatusList)
      //console.log(status)
    },
  }
})

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

我們要實現第二次點擊其他一級菜單的時候，第一次展開的一級菜單下的目錄全部隱藏，只渲染當前一級菜單下的目錄，就要在每第二次點擊的時候，讓status的每一項的值恢復為默認的全部為false的狀態，然后再改變當前點擊的index索引對應的status數組中的值。

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

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

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

GPU云服務器云服務器微信小程序的功能微信小程序的開發免費的微信小程序微信小程序支持的js

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/94719.html

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

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

cocopeak 2019-08-29 13:53 評論0 收藏0
微信小程序——商城篇

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

k00baa 2019-08-26 12:01 評論0 收藏0
第一個自己寫的banner動畫

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

raoyi 2019-08-21 10:18 評論0 收藏0
當微信小程序遇上filter~

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

Darkgel 2019-08-21 18:33 評論0 收藏0
微信小程序：實現懸浮返回和分享按鈕

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

siberiawolf 2019-07-01 11:21 評論0 收藏0