微信小程序 多列表的显示与隐藏

要实现微信小程序中多列表的显示与隐藏，可以使用 `wx:if` 或 `hidden` 属性来控制列表的显示状态。

1. 使用 `wx:if` 属性

在 wxml 文件中，可以使用 `wx:if` 属性来控制列表的显示和隐藏。例如：

<view wx:if="{{showList1}}">列表1</view>
<view wx:if="{{showList2}}">列表2</view>
<view wx:if="{{showList3}}">列表3</view>

在 js 文件中，可以通过修改 `showList1`、`showList2`、`showList3` 的值来控制列表的显示和隐藏。例如：

Page({
  data: {
    showList1: true,
    showList2: false,
    showList3: false
  },
  // 点击按钮1，显示列表1，隐藏列表2和3
  showList1: function () {
    this.setData({
      showList1: true,
      showList2: false,
      showList3: false
    })
  },
  // 点击按钮2，显示列表2，隐藏列表1和3
  showList2: function () {
    this.setData({
      showList1: false,
      showList2: true,
      showList3: false
    })
  },
  // 点击按钮3，显示列表3，隐藏列表1和2
  showList3: function () {
    this.setData({
      showList1: false,
      showList2: false,
      showList3: true
    })
  }
})

2. 使用 `hidden` 属性

在 wxml 文件中，也可以使用 `hidden` 属性来控制列表的显示和隐藏。例如：

<view hidden="{{!showList1}}">列表1</view>
<view hidden="{{!showList2}}">列表2</view>
<view hidden="{{!showList3}}">列表3</view>

在 js 文件中，同样可以通过修改 `showList1`、`showList2`、`showList3` 的值来控制列表的显示和隐藏。例如：

Page({
  data: {
    showList1: true,
    showList2: false,
    showList3: false
  },
  // 点击按钮1，显示列表1，隐藏列表2和3
  showList1: function () {
    this.setData({
      showList1: true,
      showList2: false,
      showList3: false
    })
  },
  // 点击按钮2，显示列表2，隐藏列表1和3
  showList2: function () {
    this.setData({
      showList1: false,
      showList2: true,
      showList3: false
    })
  },
  // 点击按钮3，显示列表3，隐藏列表1和2
  showList3: function () {
    this.setData({
      showList1: false,
      showList2: false,
      showList3: true
    })
  }
})

以上两种方法都可以实现多列表的显示和隐藏，具体使用哪种方法，可以根据实际情况选择。