何制作价格筛选并刷新商品列表?

本文介绍如何在微信小程序中制作价格筛选功能,包括创建数据表、查询事件、滑块与输入框的制作,以及创建相应触发器以实现商品列表的实时刷新。通过详细步骤和操作指南,帮助开发者实现这一功能。
通过使用事件中对数字的范围查询,实现筛选功能

效果展示

ca09b0c39e5941bc0fda605fa8955d07.jpeg

前置准备

  • 循环列表

具体步骤

  • 创建数据表
  • 创建查询事件
  • 制作一个按钮
  • 制作价格筛选滑块
  • 制作价格输入框
  • 创建商品展示触发器
  • 创建价格随滑块实时展示触发器

步骤分解

创建数据表

  • 点击 数据中心
  • 创建数据表

11a15441d1e7b6eddf55d87547cfdaca.jpeg

创建查询事件

  • 点击 事件中心
  • 配置事件

4ff13c92299c3d1e674a495056522040.jpeg

制作一个按钮

  • 拖拽 按钮 到 根容器
  • 选中 按钮
  • 点击 检查面板 中的 样式
  • 配置样式

267434531b4e16d63555ab09b9595c41.jpeg

制作价格筛选滑块

  • 拖拽 滑块 到 根容器
  • 选中 滑块
  • 点击 检查面板 中的 数据绑定与设置
  • 配置数据

bdc5b4def313d75c8409844c980b3cf8.jpeg0cd509b364b16c7e25627f292cf3ad41.jpeg

制作价格输入框

  • 拖拽 输入框 到 根容器
  • 点击 检查面板 中的 数据绑定与设置
  • 配置数据

47fbff51dc6153288b698499f901d071.jpeg69714093c14cc36a6c3db02d2183b5af.jpeg

创建商品展示触发器

  • 选中 循环容器
  • 点击 检查面板 中的 触发器
  • 创建 触发器

afc4e0ca213c28d81396de7e3de73204.jpeg

  • 选中 循环条目
  • 点击 检查面板 中的 数据绑定与设置
  • 绑定数据

441a9d59898a8ae2b05eaa5e2f6d5474.jpeg

  • 选中 按钮
  • 点击 检查面板 中的 触发器
  • 创建 触发器

102e20321340c1bbedff102c28de757b.jpegde5a44c28d58ae397a866d59c8577119.jpeg

创建价格随滑块实时展示触发器

  • 选中 滑块
  • 点击 检查面板 中的 触发器
  • 创建 触发器

18beb16117a8d00f7953c2458c4e192e.jpege4b637d00abe43e9342d995e8033b820.jpeg这样就可以实现价格筛选并刷新商品列表了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值