侧边栏导航类似于选项卡得一种操作

159 阅读1分钟

page代码: data: { nav:[], // 顶部导航 list:[], // list列表 list2:[], //遍历出来的数据 flag:false,
num:false }, //适用范围:当我们做分类列表时,点击进入详情页看到有类似于选项卡的效果 change(e){ // console.log(e) 运用data-自定义名字来传递cid,与list列表中数据中的id相对应进行遍历 let {cid} = e.currentTarget.dataset // 让list2清空一下 this.data.list2 = [] this.data.list.forEach((v)=>{ if(v._id==cid){ this.data.list2.push(v) }
}) this.setData({ list2: this.data.list2 }) }, // 全部列表的切换 all(){ this.setData({ list2:this.data.list }) },

// 点击进行价格升序和降序的切换 add(){ //添加一个状态,进行判断 if(this.data.flag){ var aa = this.data.list.sort((a,b)=>{ return a.price-b.price }) }else{ var aa = this.data.list.sort((a,b)=>{ return b.price-a.price }) }

// 状态的更新

this.setData({ flag:!this.data.flag, list2:aa }) },

出现的问题: 当我们进入详情页的时候再不点击导航的情况下让第一个导航的内容在下面的页面中如何渲染出来? 起初的时候呢,我一直在page函数里面修改,让后发现我这样做一直解不了问题,然后经过一系列的猜想和进一步的思考,我发现我们可以在onLoad里面设置,但是又会出现一个加载数据或者是页面加载的顺序我们在更新状态的时候不能写在运用wx.request()之前,因为你可能会在这个onLoad函数中通过接口来获取数据,这个时候我们就会出现加载的顺序问题 解决: */ onLoad: function (options) { wx.request({ url: 'liuqi987.gitee.io/data/list_n…', method:"GET", header:{ 'content-type':'application/text' }, success:res=>{ if(res.statusCode===200){ // console.log(res.data.result) this.setData({ nav:res.data.result }) } } }) wx.request({ url: 'liuqi987.gitee.io/data/list_a…', method:"GET", header:{ 'content-type':'application/text' }, success:res=>{ if(res.statusCode===200){ // console.log(res.data.list) this.setData({ list:res.data.list }) // 进去页面初始化 if(this.data.list2.length===0){
this.setData({ list2:this.data.list }) }

      }
    }
  })

// 在不点击导航的情况下让第一个导航的内容在下面的页面中渲染出来 if(this.data.list2.length===0){ this.all() this.setData({ list2:this.data.list }) } },