收藏
回答

大佬们,请问wx:for中套if的如何显示序号?

需求是一组数据,类似如下:

[
{name:张1,sex:女},
{name:张2,sex:男},
{name:张3,sex:女},
{name:张4,sex:男},
{name:张5,sex:女},
]


要求渲染后可以有性别过滤(全部、男、女三种)并输出序号,类似:

1、张1
2、张3
3、张5


我用for循环嵌套if过滤然后用{{index+1}}充当序号是不行的(会不连续,出现1、3、5这种情况),请问有没有好的实现方法?

回答关注问题邀请回答
收藏

4 个回答

  • brave
    brave
    2022-03-08
    // page.js
    Page({
      data: {
        type: 0,
        list:[
          {name:"张1",sex:"女"},
          {name:"张2",sex:"男"},
          {name:"张3",sex:"女"},
          {name:"张4",sex:"男"},
          {name:"张5",sex:"女"}
        ]
      }
    })
    // page.wxml
    <view wx:for="{{filter.getData(type, list)}}" wx:key="name">{{index}}、{{item.name}}</view>
    <wxs module="filter">
      function getData(type, list) {
        if (type == 0) {
          return list
        } else {
          return list.filter(function(item){
            return type == 1 ? item.sex === "男" : item.sex === "女" 
          })
        }
      }
    
      module.exports = {
        getData: getData
      }
    </wxs>
    
    2022-03-08
    有用 4
    回复 1
    • 龙途
      龙途
      2022-03-08
      谢谢!这个方法可以的,感谢指到
      2022-03-08
      回复
  • SUN
    SUN
    2022-03-08

    这个应该是后台给你处理吧,如果前端搞,可以查分两个数组,分别为

    man:[{name:张2,sex:男},{name:张4,sex:男},]
    woman:[{name:张1,sex:女},{name:张3,sex:女},]
    然后根据条件绑定页面变量的获取数组的范围:
    key = "all"
    setData({
    list:list
    })
    key = "woman"
    setData({
    list:woman
    })
    key = "man"
    setData({
    list:man
    })
    然后继续下标当序号,不成熟想法,仅供参考,个人还是建议后台去处理数据问题,毕竟前端主要任务还是交互与渲染
    



    2022-03-08
    有用
    回复 1
    • 龙途
      龙途
      2022-03-08
      感谢您的回答!我的实际业务比我举的例子要复杂,我已经采用楼下的方法了。
      2022-03-08
      回复
  • 15
    15
    2022-03-08

    是的,小程序里面同一标签for的优先级比if高。还是建议先在js处理好数据再循环吧

    2022-03-08
    有用
    回复 1
    • 龙途
      龙途
      2022-03-08
      好的,谢谢
      2022-03-08
      回复
  • 拾忆
    拾忆
    2022-03-08

    先用JS处理下,生成一个新的数组,然后前端显示。

    2022-03-08
    有用
    回复 1
    • 龙途
      龙途
      2022-03-08
      好的,谢谢
      2022-03-08
      回复
登录 后发表内容