微信小程序tab切换

一：获取数据,初始化存储切换下标的变量以及数据

二：点击切换高亮同时设置子数据

1.定义变量

  data: {list:[],//总数据tabIndex:0,//tab切换利用的下标childrenList:[],//子数据},

2.获取数据并且赋值

  /*** 生命周期函数--监听页面加载*/onLoad(options) {//调用获取数据函数this.getList();},//获取数据函数getList(){wx.request({url: 'http://localhost:3000/data',//请求地址method:"get",//请求的方法success:(res)=>{//成功的返回值(注意:这里要用箭头函数要不然无法访问this);console.log("res:",res);//{data: Array(10)....}//修改保存数据的变量this.setData({list:res.data,//list是在data中定义的变量childrenList:res.data[0].children//初始化子数据})}})},

3.进行渲染

{{item.title}}数量:{{item.num}}

4.设置tabindex完成切换

//设置tabindex完成切换setTabInde(e){// console.log("e:",e.currentTarget.dataset.index)//找到所点击的下标赋值给tabindex完成高亮//设置高亮以及子数据this.setData({tabIndex:e.currentTarget.dataset.index,//高亮childrenList:this.data.list[e.currentTarget.dataset.index].children//设置子数据})},

效果:

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！