微信小程序如何弄一个筛选栏？(语言-javascript)

分别是综合、价格、筛选
综合：好评排序、综合排序、信用排序
价格：从高到低、从低到高、价格
上面2个在类似图片展示

img

筛选从侧面（右边）弹出

在微信小程序中实现筛选栏，可以使用 wx.showActionSheet 或自定义弹出层等方式。下面是一个简单的实现示例：

在页面的 wxml 文件中添加筛选栏相关的代码：

<!-- 综合排序 -->
<view class="filter-item" bindtap="sortTypeTap">
  <text class="filter-title">综合</text>
  <text class="filter-type">{{ sortTypes[sortTypeIndex] }}</text>
</view>

<!-- 价格排序 -->
<view class="filter-item" bindtap="priceSortTap">
  <text class="filter-title">价格</text>
  <text class="filter-type">{{ priceSorts[priceSortIndex] }}</text>
</view>

<!-- 筛选 -->
<view class="filter-item" bindtap="filterTap">
  <text class="filter-title">筛选</text>
  <text class="filter-type">{{ filters }}</text>
</view>

<!-- 自定义弹出层 -->
<view class="modal-mask" hidden="{{ !showModal }}" />
<view class="modal" hidden="{{ !showModal }}">
  <!-- 弹出层内容 -->
  ...
</view>

在这个示例中，筛选栏包括综合排序、价格排序和筛选三个部分，分别绑定了 sortTypeTap、priceSortTap 和 filterTap 事件。同时，还定义了一个 modal-mask 和 modal 类，用于显示自定义弹出层。

在页面的 js 文件中定义相应的数据及事件处理函数

Page({
  data: {
    // 综合排序类型列表
    sortTypes: ['好评排序', '综合排序', '信用排序'],
    sortTypeIndex: 0, // 默认选中第一个

    // 价格排序类型列表
    priceSorts: ['从高到低', '从低到高', '价格'],
    priceSortIndex: 0, // 默认选中第一个

    // 筛选条件
    filters: '全部',

    // 弹出层是否显示
    showModal: false,
  },

  // 综合排序点击事件处理函数
  sortTypeTap: function () {
    let that = this;
    wx.showActionSheet({
      itemList: that.data.sortTypes,
      success: function (res) {
        that.setData({ sortTypeIndex: res.tapIndex });
      },
    });
  },

  // 价格排序点击事件处理函数
  priceSortTap: function () {
    let that = this;
    wx.showActionSheet({
      itemList: that.data.priceSorts,
      success: function (res) {
        that.setData({ priceSortIndex: res.tapIndex });
      },
    });
  },

  // 筛选点击事件处理函数
  filterTap: function () {
    this.setData({ showModal: true });
  },

  // 弹出层关闭事件处理函数
  closeModal: function () {
    this.setData({ showModal: false });
  },

  // 弹出层确定按钮点击事件处理函数
  confirmFilter: function () {
    // 获取筛选条件并更新数据
    let filters = ...;
    this.setData({ filters: filters });

    // 关闭弹出层
    this.closeModal();
  },
});

在这个示例中，定义了一个名为 Page 的对象，在其中定义了数据对象 data，包括综合排序、价格排序、筛选条件和弹出层是否显示等属性。同时，定义了 sortTypeTap、priceSortTap、filterTap、closeModal 和 confirmFilter 等事件处理函数。