微信小程序商城系列之带筛选功能的商品列表页(二)

最新推荐文章于 2023-05-13 18:12:56 发布

zx_001

最新推荐文章于 2023-05-13 18:12:56 发布

阅读量2.1w

点赞数 2

分类专栏：微信小程序文章标签：小程序小程序列表筛选商品列表筛选

本文链接：https://blog.youkuaiyun.com/zx_001/article/details/80580806

版权

本文介绍如何在微信小程序中创建一个带有筛选功能的商品列表页面，详细讲解了WXML、WXSS和JS文件的实现细节，帮助开发者实现商品列表的高效筛选。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wxml:

<view class="tabTit box">
  <view class="flex1{
  {!tab[index]?' active':''}}" wx:for="{
  {tabTxt}}" wx:key="type" data-index="{
  {index}}" bindtap="filterTab">
    <text>{
  {item}}</text>
    <image src="/img/arrow.png"></image>
  </view>
</view>
<!--筛选项-->
<view class="tabLayer" hidden="{
  {tab[0]}}">
    <text class="{
  {pinpai_id==0?'active':''}}" data-id="0" data-index="0" data-txt="品牌" bindtap="filter">不限</text>
    <text class="{
  {pinpai_id==item.id?'active':''}}" wx:for="{
  {pinpaiList}}" wx:key="pp" wx:for-item="item" data-id="{
  {item.id}}" data-index="0" data-txt="{
  {item.title}}" bindtap="filter">{
  {item.title}}</text>
</view>
<view class="tabLayer" hidden="{
  {tab[1]}}">
    <text class="{
  {jiage_id==0?'active':''}}" data-id="0" data-index="1" data-txt="价格" bindtap="filter">不限</text>
    <text class="{
  {jiage_id==1?'active':''}}" data-id="1" data-index="1" data-txt="58-88" bindtap&