index.wxml
<view class="container">
<view class="trigger" bindtap="showModal">点击显示分类列表</view>
<!-- 弹出层 -->
<view class="modal" wx:if="{{showModal}}">
<view class="modal-content">
<view class="category-list" bindtap="selectCategory1" data-type="product" data-name="{{item.name}}" data-index="{{index}}" wx:for="{{productCategories}}" wx:key="index">
<view class="category-item {{selectedIndex1 === index && 'selected'}}" data-index="{{index}}">
{{item.name}} (索引号1: {{index}})
</view>
</view>
<view class="category-list" bindtap="selectCategory2" data-type="region" data-name="{{item.name}}" data-index="{{index}}" wx:for="{{regionCategories}}" wx:key="index">
<view class="category-item {{selectedIndex2 === index && 'selected'}}" data-index="{{index}}">
{{item.name}} (索引号2: {{index}})
</view>
</view>
<view class="query-button" bindtap="query">查询</view>
</view>
</view>
</view>
index.wxss
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.trigger {
padding: 20px;
background-color: #007aff;
color: white;
text-align: center;
border-radius: 5px;
}
.modal {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: flex-end;
padding: 20px;
}
.modal-content {
background-color: white;
width: 100%;
max-height: 80%;
overflow-y: auto;
border-radius: 10px;
padding: 20px;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}
.category-list {
margin-bottom: 20px;
}
.category-item {
padding: 10px;
border-bottom: 1px solid #ddd;
}
.category-item.selected {
background-color: #f0f0f0;
}
.query-button {
padding: 10px 20px;
background-color: #007aff;
color: white;
text-align: center;
border-radius: 5px;
margin-top: 20px;
}
index.js
Page({
data: {
showModal: false,
productCategories: [
{ name: '电子产品' },
{ name: '服装鞋帽' },
{ name: '家居用品' },
],
regionCategories: [
{ name: '北京' },
{ name: '上海' },
{ name: '广东' },
],
selectedIndex1: -1,
selectedType1: '',
selectedName1: '',
selectedIndex2: -1,
selectedType2: '',
selectedName2: ''
},
showModal() {
this.setData({ showModal: true });
},
selectCategory1(e) {
const { type, index } = e.currentTarget.dataset;
this.setData({
selectedIndex1: index,
selectedType1: type,
selectedName1: e.currentTarget.dataset.name
});
console.log(e)
},
selectCategory2(e) {
const { type, index } = e.currentTarget.dataset;
this.setData({
selectedIndex2: index,
selectedType2: type,
selectedName2: e.currentTarget.dataset.name
});
console.log(e)
},
query() {
const { selectedType1,selectedName1,selectedType2,selectedName2 } = this.data;
console.log(selectedType1)
console.log(selectedName1)
console.log(selectedType2)
console.log(selectedName2)
wx.showToast({
title: `查询商品：${selectedType1}: ${selectedName1}/查询地区：${selectedType2}: ${selectedName2}`,
icon: 'success',
duration: 2000
});
// 在这里可以添加实际的查询逻辑，比如请求API接口
// wx.request({
// url: '你的API接口地址',
// data: {
// type: selectedType,
// name: selectedName
// },
// success: (res) => {
// // 处理查询结果
// }
// });
this.setData({ showModal: false });
}
});
页面布局：
index.wxml 文件中定义了触发弹出层的按钮和弹出层的布局。弹出层中包含商品名称分类列表和地区分类列表，以及查询按钮。
使用 wx:if 控制弹出层的显示与隐藏。
样式定义：
index.wxss 文件中定义了页面的样式，包括触发按钮、弹出层、分类列表项和查询按钮的样式。
逻辑处理：
index.js 文件中定义了页面的数据绑定和事件处理逻辑。
showModal 方法用于显示弹出层。
selectCategory 方法用于处理分类列表项的点击事件，更新选中的分类项。
query 方法用于处理查询按钮的点击事件，显示查询结果（这里使用 wx.showToast 模拟显示查询结果，实际开发中应替换为请求API接口的逻辑）。
将上述代码复制到你的微信小程序项目中，并根据需要进行调整。
确保你的微信小程序项目已经正确配置，可以正常运行。
在实际开发中，根据API接口的要求，修改 query 方法中的请求逻辑。