小程序点击查询弹出单个分类筛选条件

index.wxml

<view class="container">
  <view class="trigger-text" bindtap="showPopup">点击显示分类</view>
  
  <!-- 弹出层 -->
  <view class="popup {{isPopupVisible ? 'show' : ''}}">
    <view class="popup-content">
      <view class="category-list">
        <block wx:for="{{productCategories}}" wx:key="index">
          <view class="category-item {{selectedIndex === index ? 'selected' : ''}}" bindtap="selectProductCategory" data-index="{{index}}" data-name="{{item}}">
            {{item}}
          </view>
        </block>
      </view>
      <view class="category-list">
        <block wx:for="{{regionCategories}}" wx:key="index">
          <view class="category-item {{selectedIndex === index + productCategories.length ? 'selected' : ''}}" bindtap="selectRegionCategory" data-index="{{index + productCategories.length}}" data-name="{{item}}">
            {{item}}
          </view>
        </block>
      </view>
      <view class="query-button" bindtap="query">查询</view>
    </view>
  </view>
</view>

index.wxss

.container {
  padding: 20px;
}

.trigger-text {
  padding: 10px;
  background-color: #007aff;
  color: white;
  text-align: center;
  border-radius: 5px;
}

.popup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup.show {
  height: 50%; /* 调整高度以适应内容 */
}

.popup-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 20px;
}

.category-list {
  margin-bottom: 20px;
}

.category-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.category-item.selected {
  background-color: #007aff;
  color: white;
}

.query-button {
  padding: 10px;
  background-color: #007aff;
  color: white;
  text-align: center;
  border-radius: 5px;
}

index.js

Page({
  data: {
    isPopupVisible: false,
    selectedIndex: -1,
    selectedName: '',
    productCategories: ['电子产品', '服装', '家居用品'],
    regionCategories: ['北京', '上海', '广州'],
  },

  showPopup() {
    this.setData({ isPopupVisible: true });
  },

  hidePopup() {
    this.setData({ isPopupVisible: false, selectedIndex: -1, selectedName: '' });
  },

  selectProductCategory(event) {
    const index = event.currentTarget.dataset.index;
    const name = event.currentTarget.dataset.name;
    this.setData({
      selectedIndex: index,
      selectedName: name,
    });
    // this.hidePopup();
  },

  selectRegionCategory(event) {
    const index = event.currentTarget.dataset.index;
    const name = event.currentTarget.dataset.name;
    this.setData({
      selectedIndex: index,
      selectedName: name,
    });
    // this.hidePopup();
  },

  query() {
    const { selectedName } = this.data;
    console.log(selectedName)
    wx.showToast({
      title: `查询: ${selectedName}`,
      icon: 'success',
      duration: 2000
    });
    // 这里可以添加实际的查询逻辑，比如调用后端接口
  },
});

注意事项

1. 样式调整：根据实际需求调整弹出层的高度、字体大小等样式。

2. 数据获取：如果商品名称分类和地区分类是从服务器获取的，可以在页面加载时（onLoad 或 onShow 方法中）发起网络请求获取数据。

3. 查询逻辑：query 方法中的查询逻辑应根据实际需求进行实现，比如调用后端接口并处理返回结果。