(微信小程序)多个下拉列表的点击实现

最新推荐文章于 2024-08-06 09:03:34 发布

qq_33079391

最新推荐文章于 2024-08-06 09:03:34 发布

阅读量7.5k

点赞数 3

分类专栏：前端微信小程序文章标签：微信小程序多个下拉列表前端

本文链接：https://blog.csdn.net/qq_33079391/article/details/89508523

版权

本文介绍如何在微信小程序中实现多个下拉列表的点击切换效果。通过使用`bindtap`事件绑定`toggleList`函数，结合WXML和WXSS实现列表的隐藏与显示。对于列表高度变化的动画效果，建议使用JS计算动态设置高度，以避免`max-height`动画的延迟问题。读者可以在此基础上进行进一步的创新和优化。

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

假设有一个btn ----> 用来切换列表隐藏与显示. 让这个btn的bindtap="toggleList". // toggleList为这个效果的函数.

// js文件
Page({

  /**
   * 页面的初始数据
   */
  data: {
    listShow: {}
  },

  /*下拉列表按钮函数*/
  toggleList: function (e) {
    let obj = this.data.listShow;
    // 获取当前鼠标点击的下拉列表的index.
    let index = e.currentTarget.dataset.index;
    // 如果对象里存在这个index的属性就切换它的show, 不存在添加index属性并设置它的show
    if (obj[index]) {
      obj[index].show = !this.data.listShow[index].show;
    } else {
      obj[index] = {};
      obj[index].show = true;
      // listHeight的作用主要为下拉动画效果做准备, 从0到70的动画过度. 
      obj[index].listHeight = "70px";
    }
    this.setData({
      listShow: obj
    });
  }

})

wxml: 按钮就不展示了, 自个个性实现. 无非就是写个button 然后bindtap="toggleList" data-index="{ {index}}"就行, 这里的{ {index}}为wx:for里面的index。下拉列表的组件如下: