小程序点击查询弹出多个商品和地区分类筛选功能

微信 2025-02-16 09:06 285 0

以下是一个基于微信小程序的代码示例，实现了点击文字事件从下向上弹出层，显示商品名称分类列表和地区分类列表，点击选中项后显示文字和索引号，并提供查询功能。你可以根据实际需求进行调整和优化。

1. WXML 文件（页面结构）

<view class="container">
  <!-- 按钮触发弹出层 -->
  <button bindtap="showPopup">点击查询</button>

  <!-- 弹出层 -->
  <view class="popup" wx:if="{{show}}" animation="{{animation}}" style="bottom: 0;">
    <view class="popup-content">
      <view class="popup-header">
        <text>选择分类</text>
        <text bindtap="closePopup">关闭</text>
      </view>
      <view class="popup-body">
        <view class="tab">
          <text bindtap="switchTab" data-index="0" class="{{currentTab === 0 ? 'active' : ''}}">商品名称分类</text>
          <text bindtap="switchTab" data-index="1" class="{{currentTab === 1 ? 'active' : ''}}">地区分类</text>
        </view>
        <view class="list">
          <block wx:for="{{currentTab === 0 ? goodsList : regionList}}" wx:key="index">
            <view class="item" bindtap="selectItem" data-index="{{index}}" data-value="{{item}}">
              <text>{{item}}</text>
            </view>
          </block>
        </view>
      </view>
      <view class="popup-footer">
        <text>已选：{{selectedItem}}</text>
        <button bindtap="query">查询</button>
      </view>
    </view>
  </view>
</view>

2. WXSS 文件（样式）

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: -100%; /* 默认隐藏 */
  background-color: white;
  transition: bottom 0.3s;
  z-index: 1000;
}

.popup-content {
  padding: 20px;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.popup-body {
  margin-bottom: 10px;
}

.tab {
  display: flex;
  justify-content: space-around;
  margin-bottom: 10px;
}

.tab text {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.tab text.active {
  background-color: #007aff;
  color: white;
}

.list {
  max-height: 200px;
  overflow-y: auto;
}

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

.popup-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

3. JS 文件（逻辑）

Page({
  data: {
    show: false, // 控制弹出层显示
    animation: {}, // 动画
    currentTab: 0, // 当前选中的标签页
    goodsList: ["商品1", "商品2", "商品3"], // 商品名称分类列表
    regionList: ["地区1", "地区2", "地区3"], // 地区分类列表
    selectedItem: "", // 选中的项
    selectedIndex: -1 // 选中的索引
  },

  // 显示弹出层
  showPopup() {
    this.setData({
      show: true
    });
    this.createAnimation().bottom(0).step();
  },

  // 关闭弹出层
  closePopup() {
    this.setData({
      show: false
    });
  },

  // 切换标签页
  switchTab(e) {
    const index = e.currentTarget.dataset.index;
    this.setData({
      currentTab: index
    });
  },

  // 选择项
  selectItem(e) {
    const index = e.currentTarget.dataset.index;
    const value = e.currentTarget.dataset.value;
    this.setData({
      selectedItem: value,
      selectedIndex: index
    });
  },

  // 查询
  query() {
    if (this.data.selectedIndex === -1) {
      wx.showToast({
        title: "请选择一个选项",
        icon: "none"
      });
      return;
    }
    wx.showToast({
      title: `查询中...`,
      icon: "loading"
    });
    // 模拟查询逻辑
    setTimeout(() => {
      wx.hideToast();
      wx.showToast({
        title: `查询成功！选中项：${this.data.selectedItem}，索引：${this.data.selectedIndex}`,
        icon: "success"
      });
    }, 1000);
  }
});