小程序
小游戏
企业微信
微信支付
扫描小程序码分享
需求是一组数据,类似如下:
[ {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 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
// 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>
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
这个应该是后台给你处理吧,如果前端搞,可以查分两个数组,分别为
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 }) 然后继续下标当序号,不成熟想法,仅供参考,个人还是建议后台去处理数据问题,毕竟前端主要任务还是交互与渲染
是的,小程序里面同一标签for的优先级比if高。还是建议先在js处理好数据再循环吧
先用JS处理下,生成一个新的数组,然后前端显示。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
// 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>
这个应该是后台给你处理吧,如果前端搞,可以查分两个数组,分别为
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 }) 然后继续下标当序号,不成熟想法,仅供参考,个人还是建议后台去处理数据问题,毕竟前端主要任务还是交互与渲染
是的,小程序里面同一标签for的优先级比if高。还是建议先在js处理好数据再循环吧
先用JS处理下,生成一个新的数组,然后前端显示。