小程序點擊顯示隱藏列表內容


效果圖如下:

 

首先用v-for去遍歷數組,將index取出,然后將這個數組進行渲染。

拿到index之后,我們需要寫一個方法,對這個index進行一些處理。

我們這里可以在這個 “<” icon中去設置一個方法,比如 openList(index),別忘記將index傳入

在data中隨意建立一個數組,比如 arr: []

這樣在methods中我們可以這樣去寫這個方法:

openList(index) {

  let _index = this.arr.indexOf(index);

  if  (_index > -1) {

    this.arr.splice(_index, 1)

  } else {

    this.arr = [index]

  }

}

我第一次想法是將每次點擊不同的index都添加進數組里,這樣可以同時展開多個數組,如下

首先設置一個變量,將它賦值成這個數組第一次出現這個index的位置。

之后判斷,如果這個位置有元素,那么indexOf的返回值一定是大於-1的,這個時候就應該在數組中刪除這個元素,也就是刪除這個元素第一次出現的位置上所在的元素。

之后用arr.push(index)將這個元素push進數組中,

在頁面page中v-show就可以這樣去判斷 v-show=" arr.indexOf(index) > -1";

但是在小程序中,目前不支持在wxml中實現indexOf方法,所以只能退而卻其次,每次只能打開一個頁面,

這樣就直接將arr賦值成傳下來的index,

這樣頁面page中的v-show就這樣去判斷 v-show=" arr.length > 0 && arr[0] = index"

這樣就可以實現上面的效果

 

 
       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM