小程序如何在点击筛选价格区域后自动刷新呢

注明:点击筛选价格区间后让页面刷新加载,希望可以详细一点,怕看不懂

1、效果图:

img

2、响应数据(这里之后不知道怎么刷新),如图:

img

比较简单,不一定是刷新整个页面的思路。
比如把筛选结果的列表封装到一个方法,

onLoad() {
  this.getList()
}
// 获得页面数据
getList() {
  
}

bind1方法直接触发 getList 方法即可

bind1() {
  // 将筛选栏的数据保存
   this.setData({
    // price ..
  })
  // 调用获得页面数据的方法
  this.getList()
}

自动刷新其实是不存在的,绑定点击事件,有2种方法进行筛选
1,如果列表不是很大,已经全部读取,那么对列表进行筛选。
2,可以访问后端,读取数据后,显示筛选的内容

不知道是不是我想的简单了,写了一个粗略的示例你看下符不符合。

img

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

选了价格区间,调接口重新获取数据渲染就可以了