小程序多个筛选项功能实现

最新推荐文章于 2024-01-19 14:02:18 发布

叶川飞流

最新推荐文章于 2024-01-19 14:02:18 发布

阅读量5.6k

点赞数 4

分类专栏：小程序开发问题记录

本文链接：https://blog.csdn.net/weixin_41033048/article/details/105903178

版权

本文介绍了如何在微信小程序中实现多个筛选条件的功能，通过JavaScript（js）和样式表（wxss）进行交互和界面展示，帮助用户更高效地查找和过滤所需信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

js

  data: {
    active: 0,
    value: 4,
    domain: app.domain,
    shop: 'mat/dist/images/index/shop.png',
    pos: 'mat/dist/images/index/pos.png',
    open: false,
    index: 0,
    select: [{
        title: '选择城市',
        open: false
      },
      {
        title: '选择区域',
        open: false
      },
      {
        title: '服务选择',
        open: false
      },
      {
        title: '筛选方式',
        open: false
      }
    ],
    indexSign: '',
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
    var pages = getCurrentPages();
    var currentPage = pages[pages.length - 1];
    wx.setNavigationBarTitle({
      title: '车主服务'
    });
    that.setData({
      page_url: currentPage.route,
    });
  },
  skipSelect(e) {
    var index = e.currentTarget.dataset.index;
    var indexSign = this.data.indexSign;
    console.log('indexSign', index, indexSign);
    if (indexSign === '') {
      this.setData({
        open: true,
        indexSign: index
      })
    } else {
      if (indexSign === in

最低0.47元/天解锁文章