微信小程序列表点击隐藏显示,默认第一行显示

自己搞了半天搞了个半成品，后来在网友的帮助下改正了，看效果

wxml代码如下：

<view class='weui-panel__bd'>
      <view class='weui-media-box weui-media-box_appmsg'>
        <view class="navView" bindtap="tigger" data-num="1">1：网络</view>
        <view class="classname {{uhide==1?'':'hidden'}}">
          2222222
        </view>

        <view class="navView" bindtap="tigger" data-num="2">2：学校</view>
        <view class="classname {{uhide==2?'':'hidden'}}">
          333
        </view>

        <view class="navView" bindtap="tigger" data-num="3">3：医院</view>
        <view class="classname {{uhide==3?'':'hidden'}}">
          4444
        </view>

        <view class="navView" bindtap="tigger" data-num="4">4：商场</view>
        <view class="classname {{uhide==4?'':'hidden'}}">
         55555
        </view>

      </view>
    </view>
  </view>

样式你自己写，根据你需要的。

js代码如下:

const app = getApp()
Page({
  data: {
    uhide: 1
  },
  onLoad: function() {
 
  },
  //显示隐藏
  tigger: function(e) {
    var that = this;
    var toggleBtnVal = that.data.uhide
    var num = e.currentTarget.dataset.num
    if (toggleBtnVal == num) {
      that.setData({
        uhide: 0
      })
    } else {
      that.setData({
        uhide: num
      })
    }
  }
})

其中的hidden样式为:

.hidden{
 display:none;
}

这就写好了。