微信小程序仿‘獲得app’分類列表頁

時間 2019-11-25

標籤微信程序獲得 app 分類列表简体版

原文原文鏈接

今天另起一篇，貼出完整的代碼，大概思路是左側大分類列表，點擊後聯動右側二級分類，及下面文章列表，點擊二級分類也聯動下面文章列表。web

代碼以下：api

<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:app

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
    })
  },

  
})