微信小程序多层嵌套循环,三级数组遍历
发布时间:2020-12-14 19:31:58 所属栏目:资源 来源:网络整理
导读:数据:三层嵌套 index.wxml 页面 !-- 菜单标签 -- view class = 'menu_label' 'label_ul' wx:for = " {{ menuList }} " wx:key = '' {{ label_index == index ? 'label_lis' : 'label_li' }} bindtap = 'menuList' id = {{ index }} " {{ item.title }} / vi
数据:三层嵌套 index.wxml 页面
index.js页面 Page({
/**
* 页面的初始数据
*/
data: {
menuList: [
{ title: '全部' },{ title: '文学' },68);">'技术类' },68);">'社会科学' },68);">'设计' },],label_index: 0,bookUl: [
{
bookSec: [
{
bookList: [
{ img: '../../img/img1_icon.png' },{ img: '../../img/img2_icon.png' },68);">'../../img/img3_icon.png' },]
},{
bookList: [
{ img: '../../img/img4_icon.png' },68);">'../../img/img5_icon.png' },]
}
]
},{
bookSec: [
{
bookList: [
{ img: '../../img/img6_icon.png' },68);">'../../img/img4_icon.png' }
]
},68);">'../../img/img7_icon.png' }
]
}
]
},68);">'../../img/img7_icon.png' },68);">'../../img/img6_icon.png' }
]
}
]
},]
/**
* 菜单点击切换内容
*/
menuList: function (e) {
let that = this;
// console.log(e);
var id = e.target.id;
that.setData({
label_index: id
})
}
},})
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。 如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。 wx:key 的值以两种形式提供 最后效果图 作者:MRZYD 原文:https://segmentfault.com/a/1190000016818075 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |