微信小程序开发——使用Vant组件库van-dropdown-menu实现下拉列表切换页面内容

YSC7

已于 2022-02-22 15:25:47 修改

阅读量8.6k

点赞数 4

文章标签：微信小程序小程序前端

于 2022-02-22 15:21:28 首次发布

本文链接：https://blog.csdn.net/qq_17792441/article/details/123069147

版权

本文介绍了如何利用Vant组件库的van-dropdown-menu组件来创建一个下拉列表，通过切换选择项来改变页面显示内容。通过设置hidden属性控制各个view模块的显示与隐藏，结合onchange事件监听选项变化，从而实现内容的动态切换。示例代码展示了具体的实现方式。

摘要由CSDN通过智能技术生成

使用Vant组件库van-dropdown-menu实现下拉列表切换页面内容

请先根据官网要求安装好vant组件库并引入相关组件

1、思路

在页面中使用hidden属性判断是否选中当前信息，再隐藏其他所有内容，仅显示所选内容。

2、代码

wxml部分

<van-dropdown-menu>
  <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" bind:change="onchange"/>
</van-dropdown-menu>

<view hidden="{{flag!==0}}">
000
</view>

<view hidden="{{flag!==1}}">
111
</view>

<view hidden="{{flag!==2}}">
222
</view>

<view hidden="{{flag!==3}}">
333
</view>

<view hidden="{{flag!==4}}">
444
</view>

js部分

  data: {
    option1: [
      { text: '当日考勤情况', value: 0 },
      { text: '考勤历史查看', value: 1 },
      { text: '本周考勤情况', value: 2 },
      { text: '本月考勤情况', value: 3 },
      { text: '今年考勤情况', value: 4 },
    ],
    value1: 0,
    flag:0
  },
  onchange:function (e) {
    this.setData({
      flag:e.detail
    })
    console.log(this.data.flag)
  },