index.wxml
<view class="container">
<!-- 点击区域 -->
<view class="click-area" bindtap="togglePopup">
<text>
{{selectedProduct.name}} - {{selectedRegion.name}}
</text>
</view>
<!-- 弹出层 -->
<view class="popup" hidden="{{!showPopup}}">
<view class="popup-content">
<!-- 商品分类列表 -->
<view class="category-list">
<view
class="category-item {{selectedProduct.index === index ? 'active' : ''}}"
wx:for="{{productCategories}}"
wx:key="index"
data-index="{{index}}"
bindtap="selectProduct"
>
{{item.name}}
</view>
</view>
<!-- 地区分类列表 -->
<view class="category-list">
<view
class="category-item {{selectedRegion.index === index ? 'active' : ''}}"
wx:for="{{regions}}"
wx:key="index"
data-index="{{index}}"
bindtap="selectRegion"
>
{{item.name}}
</view>
</view>
</view>
</view>
</view>
index.wxss
.container {
position: relative;
width: 100%;
height: 100vh;
}
.click-area {
padding: 20px;
background-color: #f0f0f0;
text-align: center;
cursor: pointer;
}
.popup {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: white;
border-top: 1px solid #ccc;
z-index: 1000;
animation: slide-up 0.3s ease-out;
}
@keyframes slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.popup-content {
padding: 20px;
}
.category-list {
margin-bottom: 20px;
}
.category-item {
padding: 10px;
border-bottom: 1px solid #eee;
cursor: pointer;
}
.category-item:last-child {
border-bottom: none;
}
.category-item.active {
background-color: #eef;
font-weight: bold;
}
index.js
Page({
data: {
// 控制弹出层的显示与隐藏
showPopup: false,
// 商品名称分类列表
productCategories: [
{ name: '电子产品', index: 0 },
{ name: '家居用品', index: 1 },
{ name: '服装配饰', index: 2 },
// 其他分类...
],
// 地区分类列表
regions: [
{ name: '北京', index: 0 },
{ name: '上海', index: 1 },
{ name: '广东', index: 2 },
// 其他地区...
],
// 当前选中的商品分类
selectedProduct: { name: '请选择商品分类', index: -1 },
// 当前选中的地区分类
selectedRegion: { name: '请选择地区分类', index: -1 },
},
// 切换弹出层显示
togglePopup() {
this.setData({
showPopup: !this.data.showPopup
});
},
// 选择商品分类
selectProduct(e) {
const selectedIndex = e.currentTarget.dataset.index;
const selectedName = this.data.productCategories[selectedIndex].name;
this.setData({
selectedProduct: { name: selectedName, index: selectedIndex },
showPopup: false
});
// 可以在这里触发查询功能
this.performQuery();
},
// 选择地区分类
selectRegion(e) {
const selectedIndex = e.currentTarget.dataset.index;
const selectedName = this.data.regions[selectedIndex].name;
this.setData({
selectedRegion: { name: selectedName, index: selectedIndex },
showPopup: false
});
// 可以在这里触发查询功能
this.performQuery();
},
// 查询功能
performQuery() {
const { selectedProduct, selectedRegion } = this.data;
console.log('查询参数：', {
product: selectedProduct.name,
region: selectedRegion.name,
productIndex: selectedProduct.index,
regionIndex: selectedRegion.index
});
// 在这里调用API或执行其他查询逻辑
// 例如：
/*
wx.request({
url: 'https://your-api-endpoint.com/query',
method: 'POST',
data: {
product: selectedProduct.name,
region: selectedRegion.name
},
success: (res) => {
// 处理查询结果
}
});
*/
}
});
点击触发弹出层：用户点击“点击区域”时，会调用 togglePopup 方法切换弹出层的显示状态。
选择分类：在弹出层中，用户点击某个商品分类或地区分类时，会调用相应的 selectProduct 或 selectRegion 方法，更新选中的分类信息，并关闭弹出层。
高亮选中项：通过动态绑定 class，当某一项被选中时，添加 active 类，使其背景颜色变化，达到点亮效果。
执行查询：每次选择分类后，都会调用 performQuery 方法，你可以在这里集成实际的查询逻辑，如调用API获取数据。
根据需求，你可以进一步扩展以下功能：
搜索功能：在弹出层中加入搜索框，方便用户快速查找分类。
多选支持：允许用户选择多个商品分类或地区分类。
动画优化：调整弹出层的动画效果，使其更加流畅或符合设计需求。
键盘关闭：在移动设备上，点击弹出层外部区域关闭弹出层。
数据管理：确保分类数据来源可靠，可以在页面加载时通过API获取最新的分类列表。
性能优化：对于大量分类数据，考虑使用虚拟列表等技术优化渲染性能。
用户体验：提供清晰的选中反馈，确保用户明确知道当前选中了哪些分类。