微信小程序 仿‘得到app’分类列表页

今天另起一篇，贴出完整的代码，大概思路是左侧大分类列表，点击后联动右侧二级分类，及下面文章列表，点击二级分类也联动下面文章列表。

代码如下：

<view class="page">
  <view class="flex-row">
    <!--左侧栏-->
    <view class="nav_left" >
      <block wx:for="{{leftList}}" wx:key="unique" class="left_area">
      <!--当前项的id等于item项的id，那个就是当前状态-->
      <!--用data-index记录这个数据在数组的下标位置，使用data-id设置每个item的id值，供打开2级页面使用-->
        <view class="nav_left_items {{curNav == item.paperColumnId ? 'active' : ''}}" bindtap="onLeftTab" data-index="{{index}}" data-id="{{item.paperColumnId}}">{{item.columnName}}</view>
      </block>
    </view> 
    <!--右侧栏-->
    <view class="nav_right">
      <scroll-view scroll-x="true" class="nav_right_top">
        <block wx:for="{{rightTopList}}" wx:key="unique" >
          <view class="right_top_items {{rightNav == item.paperColumnId ? 'active' : ''}}" data-index="{{index}}" data-id="{{item.paperColumnId}}" bindtap="onRightTab">
            <text>{{item.columnName}}</text>
          </view>
         </block>
      </scroll-view>     

      <view class="totalCount">共{{totalCount}}个内容</view>
      <scroll-view scroll-y="true" class="nav_right_list" bindscrolltolower='scrollLower'>
        <block wx:for="{{rightArticles}}" wx:key="unique" >
          <view class="nav_right_items" data-id="{{item.paperPatternsId}}" bindtap="onDetails">
            <text>{{item.patternsTitle}}</text>
          </view>
        </block>
        <view class="flex-center" hidden="{{nodata}}">该分类暂无数据</view>
      </scroll-view>

    </view>
  </view>
</view>

样式：

.nav_left {
    overflow-y: auto;
    width: 25%;
    height: 100vh;
    background: #f5f5f5;
}

.nav_left .left_area {
    height: 100%;
}

.nav_left .nav_left_items {
    padding: 20rpx;
    font-size: 28rpx;
}

.active {
    background: #fff;
    color: #12318b;
}

.nav_right {
    position: relative;
    width: 75%;
}

.nav_right .nav_right_top {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99;
    display: flex;
    padding-top: 20rpx;
    width: 75%;
    height: 80rpx;
    border-bottom: 1px solid #dedede;
    background: #fff;
    white-space: nowrap;
    font-size: 28rpx;
    flex-direction: row;
}/*二级分类，固定不动*/

.nav_right_top .right_top_items {
    display: inline-block;
    margin-left: 20rpx;
}

.nav_right_list {
    overflow-y: auto;
    margin-top: 140rpx;
    height: calc(100vh - 140rpx);
}/*高度100vh - 上方140rpx*/

.nav_right .nav_right_items {
    display: -webkit-box;
    overflow: hidden;
    padding: 15rpx 15rpx 16rpx;
    border-bottom: 1px solid #dedede;
    text-overflow: ellipsis;
    white-space: normal!important;
    word-wrap: break-word;
    line-height: 1.7;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}/*内容最多显示2行，超出显示...*/

.nav_right .totalCount {
    position: fixed;
    top: 80rpx;
    right: 0;
    z-index: 99;
    padding-left: 15rpx;
    width: 75%;
    height: 60rpx;
    border-bottom: 1px solid #dedede;
    background: #fff;
    font-size: 28rpx;
    line-height: 60rpx;
}/*二级分类下的内容数量，固定不动*/

js:

var api = require('../../api.js');
var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    leftList:[], //左侧栏目列表
    rightTop: [], //右侧二级栏目列表
    rightList:[], //右侧文章列表
    curNav: '3', //默认左侧第一个栏目id
    cid:'', //
    rightNav:'3', //默认右侧栏目id
    pageindex:1, //分页
    isFromSearch: true,  //用于判断articles数组是不是空数组，默认true，空的数组
    nodata: true
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    this.leftList();
    this.rightTop(that.data.rightNav);
    this.loadArticles(that.data.rightNav);
    
  },

  //左侧栏目
  leftList: function () {
    var that = this;
    wx.request({
      url: api.wx.sswsColumn,
      data:app.getSign({
      }),
      success: (res) => {
        console.log(res);
        that.setData({
          leftList: res.data.data,
        })
      }
    })
  },
  //左侧栏目点击事件 
  onLeftTab: function (e) {
    console.log(e.target.dataset.id);
    // 获取item项的id，和数组的下标值  
    let curNav = e.target.dataset.id,
      index = parseInt(e.target.dataset.index);
    // 把点击到的某一项，设为当前index  
    this.setData({
      curNav: curNav,
      cid: curNav,
      rightNav: curNav,
      pageindex: 1, //每点击分类分页归1
      isFromSearch: true, //每点击分类数组置为空
    })
    console.log('curNav',curNav);
    this.rightTop(curNav);
    this.loadArticles(curNav);
  },

  //右侧顶部栏目
  rightTop:function(cid){
    var that = this;
    wx.request({
      url: api.wx.sswsColumn,
      data: app.getSign({
        cid: that.data.rightNav,
      }),
      success: (res) => {
        console.log(res);
        var rightTop = res.data.data;
        var obj = {
          paperColumnId: that.data.curNav,
          columnName: "全部"
        };
        //后台数据没有全部，所以在每个二级分类的数组前插入'全部'，id是父级分类的id
        rightTop.unshift(obj);
        that.setData({
          rightTopList: rightTop
        })
        //console.log('11',that.data.rightTopList);
      }
    })  
  },
  //右侧栏目点击事件
  onRightTab:function(e){
    console.log(e.currentTarget.dataset.id);
    let rightNav = e.currentTarget.dataset.id,
      index = parseInt(e.currentTarget.dataset.index);
    this.setData({
      rightNav: rightNav,
      pageindex: 1, //每点击分类分页归1
      isFromSearch: true, //每点击分类数组置为空
    })
    this.loadArticles(rightNav);
  },

  //右侧列表
  loadArticles:function(cid,pageindex){
    var that = this;
    var pageindex = that.data.pageindex; 
    wx.request({
      url: api.wx.sswsList,
      data: app.getSign({
        cid: that.data.rightNav,
        page: pageindex,
        limit:'15',  //显示条数，可更改
      }),
      success: (res) => {
        console.log('la',res);
        if(res.data.data != 0){　　　　　　var rightList = res.data.data.data;
          that.data.isFromSearch ? rightList = res.data.data.data : rightList = that.data.rightArticles.concat(res.data.data.data)
          that.setData({
            totalCount: res.data.data.totalCount,
            rightArticles: rightList,
          });
　　　　　}else{　　　　
          that.setData({
　　　　　　　nodata:false,
　　　　　　  })
　　　　   }
      }
    })  
  },
  //加载更多
  scrollLower:function(){
    let that = this;
    console.log("before" + that.data.pageindex);
    if (that.data.pageindex <= 20) {
      that.setData({
        pageindex: that.data.pageindex + 1,  //每次触发上拉事件，把pageindex+1
        isFromSearch: false  //触发到上拉事件，把isFromSearch设为为false
      });
      console.log("after" + that.data.pageindex);

      that.loadArticles();

    } else {
      wx.showToast({
        title: '没有更多数据',
      })
      this.setData({
        searchLoading: false,
      })
    }
  },
  
  //详情页
  onDetails:function(e){
    console.log(e.currentTarget.dataset.id);
    wx.navigateTo({
      url: "../sswsDetail/sswsDetail?paperPatternsId=" + e.currentTarget.dataset.id
    })
  },

  
})