注明:点击筛选价格区间后让页面刷新加载,希望可以详细一点,怕看不懂
1、效果图:
2、响应数据(这里之后不知道怎么刷新),如图:
比较简单,不一定是刷新整个页面的思路。
比如把筛选结果的列表封装到一个方法,
onLoad() {
this.getList()
}
// 获得页面数据
getList() {
}
bind1方法直接触发 getList 方法即可
bind1() {
// 将筛选栏的数据保存
this.setData({
// price ..
})
// 调用获得页面数据的方法
this.getList()
}
自动刷新其实是不存在的,绑定点击事件,有2种方法进行筛选
1,如果列表不是很大,已经全部读取,那么对列表进行筛选。
2,可以访问后端,读取数据后,显示筛选的内容
不知道是不是我想的简单了,写了一个粗略的示例你看下符不符合。
index.wxml
<view class="screening-conditions">
<view class="screening-condition-item" wx:for="{{screeningConditions}}" wx:key="unique" data-item="{{item}}" bindtap="handleScreen">{{item.label}}</view>
<view class="goods">
<view class="goods-item" wx:for="{{goods}}" wx:key="unique">
{{item.name}} --- {{item.price}} 元
</view>
</view>
</view>
index.js
// 这里模拟后端数据
let goods = []
for (let i = 0; i < 20; i++) {
goods.push({
name: '商品' + i,
price: Math.round(Math.random() * 6000)
})
}
Page({
data: {
// 搜索条件
screeningConditions: [
{
label: '小于1000',
min: 0,
max: 1000
},
{
label: '1000-2000',
min: 1000,
max: 2000,
},
{
label: '2000-3000',
min: 2000,
max: 3000,
},
{
label: '3000-5000',
min: 3000,
max: 5000,
},
{
label: '5000++',
min: 5000,
},
{
label: '取消筛选'
}
],
goods: goods
},
handleScreen(e) {
let { min, max } = e.currentTarget.dataset.item;
this.setData({
goods: goods.filter(good => (!min || good.price >= min) && (!max || good.price < max))
})
},
})
https://developers.weixin.qq.com/s/w8jKbsmz7cC2
选了价格区间,调接口重新获取数据渲染就可以了