微信小程序点击显示同级的view

微信小程序点击显示同级的view

在写项目的时候，遇到一个需求，就是点击主标题，对应的子标题集合要显示出来
当然刚进来的时候。第一个主标题的子标题集合是显示的，其他的都不显示

如图所示：

怎么实现呢
整体的结构是这样的,循环整个大框架 ，在它里面是两个同级标签view,

// An highlighted block

  <!-- 大框架,在这里开始for循环 -->
  <view wx:for="{{noteList}}" wx:key="{{key}}">
  
     <!-- 大标题 -->
     <view class="note-title {{chooseNote != index? '': 'note-title-cur'}}" bindtap='showChildList' data-index='{{index}}'>
        <view class='title'>第{{index}}块ヾ(*´▽‘*)ﾉ</view>
     </view>


     <!-- 子标题 -->    
     <view class='noteFrame' data-name='{{index}}' wx:if="{{chooseNote == index}}" >       
            <view class='listTitle'>我是小小子标题╭(●｀∀´●)╯</view>       
     </view>     
        
  </view>

1. 在子标题上判断一下是否渲染 wx:if="{{chooseNote == index}}" ，在大标题上添加事件， 点击大标题，触发事件bindtap=‘showChildList’

2. 大家都是子标题，我怎么区分呢，当然是参数啦，我是第一块的子标题；我是第二块的子标题；。。。。。既然父子标题在一个for循环里，那就下标吧， 于是index被委以重任承担起了最为重要的点谁显示谁的重任
   怎么传递参数呢，data-index=’{{index}}’，到时候就可以从event中获得这个参数了e.currentTarget.dataset.index

3. 我们会在js中写函数showChildList，chooseNote被点击的赋值，页面判断哎呀等于下标index之后，哇可以渲染了，其他都是不等于，那就不渲染，不渲染就是空啊，空就是我们想要的隐藏啊，至此，nice!!!
   this.setData({
   chooseNote: index,
   })
   然后就是点击谁就显示谁的子标签了
   下面就到了喜闻乐见的源代码环节

接下来就到了喜闻乐见的上源代码片段了
1.微信小程序的页面wxml

// An highlighted block
<view class="body">
  <!-- 大框架,在这里开始for循环 -->
  <view wx:for="{{noteList}}" wx:key="{{key}}">
    <!-- 大标题 -->
    <view class="note-title {{chooseNote != index? '': 'note-title-cur'}}" bindtap='showChildList' data-index='{{index}}'>
      <view class='title'>第{{index}}块ヾ(*´▽‘*)ﾉ</view>
  </view>


  <!-- 子标题 --> 
  <view class='noteFrame' data-name='{{index}}' wx:if="{{chooseNote == index}}" >
    <view class='noteContent' wx:for="{{item.sub}}" wx:key="{{key}}">    
      <view class='noteList' >   
        <view class='listTitle'>{{item}}我是小小子标题{{item}}</view>      
      </view>       
    </view>
  </view>
  
</view>
</view>

2.微信小程序的样式wxss

.body {
  background: rgba(248, 248, 248, 0.82);
  padding-top: 10rpx;
}

.noteFrame {
  margin: 0rpx 38rpx 0rpx;
}

.notebookImg {
  width: 52rpx;
  height: 46rpx;
  margin-right: 16rpx;
}

.takeNoteImg {
  width: 30rpx;
  height: 26rpx;
  margin-right: 8rpx;
}

.note-title {
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.16078431372549018);
  padding: 54rpx 38rpx 36rpx;
}

.note-title-cur {
  border-bottom: none;
}

.note-title .title {
  flex: 1;
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  opacity: 1;
}

.note-title .noteAmount {
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
}

.note-title .number {
  color: #f00;
}

.noteContent {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 18rpx rgba(0, 0, 0, 0.1);
  opacity: 1;
  border-radius: 24rpx;
  padding-top: 22rpx;
  padding-bottom: 20rpx;
}

.noteList {
  padding: 42rpx 28rpx;
  border-bottom: 2rpx solid rgba(0, 0, 0, 0.16078431372549018);
  display: flex;
  align-items: center;
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  opacity: 1;
}

.noteList:nth-last-child(1) {
  border-bottom: none;
}

.listTitle {
  font-size: 28rpx;
  flex: 1;
}

3.微信小程序的脚本js

// An highlighted block
// pages/wangpaiNote/note.js
Page({
  data: {
    chooseNote: 1,
   noteList: {
      1: { sub: { 1: '╭(●｀∀´●)╯'}},
      2: { sub: { 1: '╭(′▽`)╭(′▽`)╯'}},
      3: { sub: { 1: 'o(´^｀)o'}},
      4: { sub: { 1: '(..•˘_˘•..)'}},
    },
  },
  // 显示小小子标题
  showChildList:function(e){
    console.log(e.currentTarget.dataset.index);
    var index = parseInt(e.currentTarget.dataset.index);
    console.log(index);
    if(this.data.chooseNote == index){
      this.setData({
        chooseNote: -1,
      })
    }else{
      this.setData({
        chooseNote: index,
      })
    }
  },
})