左侧导航栏

1、小程序端

2、样式

/* 选材样式 */
.productNav{
  display: flex;
  flex-direction: row;
}
.left{
  width:25%;
  font-size:30rpx;
  background-color: #f4f4f4;
}
.left view{
  text-align:center;
  height:90rpx;
  line-height: 90rpx;
}
.selected{
  background-color: #fff;
  font-weight: bold;
  color:#E54847;
}
.normal{
    background-color: #f4f4f4;
    border-bottom: 1px solid #f2f2f2;
}
.right{
  width:75%;
  margin:0;
}
.right .cailiao-box{
  margin-left:1px;
}
.right .cailiao-info{
  background-color: #fff;
  padding:5rpx;
  height:60px;
  line-height: 60px;
  margin-bottom: 45rpx;
  text-align: center;
}

3、数据

// pages/details/details.js
const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    url: app.globalData.URL,
    activeIndex:0,
    currentTab:'',
    categoryList:''
  },// 实现一级分类的切换效果
  switchNav:function(event){
      // console.log(event)
      const {index } =event.currentTarget.dataset
      // console.log(index)
      this.setData({
        activeIndex:index
      })
  },
  // 获取材料类别
  getCailiaoType:function(options){
    var _this = this
    var app_url = _this.data.url;
    wx.request({
      url: app_url + '/v1/getCailiaoType',
      method: 'get',
      success: function (res) {
        let cailiaoTypeData =res.data.data
        // console.log(cailiaoTypeData)
        _this.setData({
          cailiaoTypeData: cailiaoTypeData,
        })
      },
      fail: function (res) {
        console.log(res);
      }
    })
  },
  // 获取材料
  getCailiao:function(options){
    var _this = this
    var app_url = _this.data.url;
    wx.request({
      url: app_url + '/v1/getCailiaoData',
      method: 'get',
      success: function (res) {
        let getSelectCailiaoData =res.data
   
        console.log(getSelectCailiaoData)
        console.log(getSelectCailiaoData[0]['children'].length)
        // console.log(getSelectCailiaoData[2]['children'])
        console.log(999)
        _this.setData({
          categoryList: getSelectCailiaoData,
        })
      },
      fail: function (res) {
        console.log(res);
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
      
      let id = options.data;
      var that = this;
      that.getCailiaoType()
      that.getCailiao();
      var app_url = that.data.url;
      wx.request({
        url: app_url + '/v1/getGongdiDetails/' + id,
        data: {},
        success: function (res) {
          var gongdi_info = res.data;
          that.setData({
            gongdi_info: gongdi_info
          })
        },
        fail: function (res) {
        }
      })
  },
  //事件处理函数 
  switchRightTab: function (e) {
    // 获取item项的id，和数组的下标值 
    let id = e.target.dataset.id,
      index = parseInt(e.target.dataset.index);
    // 把点击到的某一项，设为当前index 
    this.setData({
      curNav: id,
      curIndex: index
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})

4、后端

路由：

构建数据：

5、效果