小程序tab 列表完美解决方案

// pages/live/live.js
const config = require('../../pc.config.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    nav: [{
      "columnName": '全部',
      "columnId": "000081525"
    }, {
      "columnName": '好物种草',
      "columnId": "000084624"
    }, {
      "columnName": '收纳支招',
      "columnId": "000084644"
    }, {
      "columnName": '细节控',
      "columnId": "000084645"
    }, {
      "columnName": '小改造',
      "columnId": "000084625"
    }, {
      "columnName": '洗刷刷',
      "columnId": "000084626"
    }, {
      "columnName": '睡眠研究',
      "columnId": "000084646"
    }],
    list: {},
    curListId: 0,
    endTipHidden: false,
    endTip: '正在加载',
    current: 0,
    scrollLeft: 0,
    loading: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var index = options.index || 0;
    this.getNav(index);
  },
  timer: null,

  //获取导航和节点
  getNav: function (index) {
    var self = this;
    swan.request({
      url: config.getAPI('liveNav'),
      success: function (res) {
        //   console.log(res);
        self.setData({
          nav: res.data.livingColumn,
          current: index
        });
        //获取导航的初始位置
        if (index > res.data.livingColumn.length / 2) {
          self.setData({
            scrollLeft: 1054 / 2
          });
        }

        self.getList(res.data.livingColumn[index].columnId);
      }
    });
  },
  //滑到底部加载更多
  loadMoreList: function () {
    var self = this;
    clearTimeout(self.timer);
    self.timer = null;
    self.timer = setTimeout(function () {
      var list = self.data.list;
      var cid = self.data.curListId;
      if (list[cid].pageNo < list[cid].pageCount) {
        self.getList(cid);
      }
    }, 300);
  },
  //请求列表
  getList: function (cid) {
    var self = this;
    this.setData({
      curListId: cid
    });
    var list = this.data.list;
    if (this.data.loading) return;
    this.setData({
      loading: true
    })
    if (!list[cid] || (list[cid] && (list[cid].pageNo < list[cid].pageCount))) {
      var pageNo = !list[cid] ? 1 : list[cid].pageNo + 1;
      swan.request({
        url: config.getAPI('liveList') + `?columnType=livingColumn&columnId=${cid}&pageSize=10&pageNo=${pageNo}`,
        success: function (res) {
          //   console.log(res.data);
          var obj = {};
          obj.pageNo = res.data.pageNo;
          obj.pageCount = Math.ceil(res.data.total / res.data.pageSize);
          obj.total = res.data.total;
          obj.data = !list[cid] ? res.data.data : list[cid].data.concat(res.data.data);
          obj.swiperHeight = 1110;
          obj.swiperHeight = res.data.total > res.data.pageSize * res.data.pageNo ? res.data.pageSize * res.data.pageNo * 518 + 102 : res.data.total * 518 + 102;
          if (res.data.pageNo * res.data.pageSize >= res.data.total) {
            obj.endTip = '没有更多了';
            obj.endTipHidden = true;
          } else {
            obj.endTip = '正在加载';
          }
          list[cid] = obj;
          self.setData({
            list,
            loading: false
          });
        },
        fail: function () {
          swan.showModal({
            title: '提示',
            content: '加载不成功，是否重新加载？',
            confirmText: "重新加载",
            success: function (res) {
              self.setData({
                loading: false
              })
              if (res.confirm) {
                self.loadMoreList();
              } else if (res.cancel) {
                // console.log('用户点击取消')
              }
            }
          });
        }
      });
    }
  },
  switchNav: function (index) {
    if (index && this.data.current == index) return;
    var cid = this.data.nav[index].columnId;
    var self = this;
    var scrollLeft = 0;
    if (index > this.data.nav.length / 2) {
      scrollLeft = 1054 / 2;
    }
    var list = self.data.list;
    if (!list[cid]) {
      clearTimeout(self.timer);
      self.timer = null;
      self.timer = setTimeout(function () {
        self.setData({
          curListId: cid,
          current: index,
          scrollLeft
        });
        self.getList(cid);
      }, 500);
    } else {
      self.setData({
        curListId: cid,
        current: index,
        scrollLeft
      });
    }
  },
  //切换导航
  changeTab: function (e) {
    // console.log('changetab');
    var index = e.currentTarget.dataset.index;
    this.switchNav(index);
  },
  //滑动swiper
  bindchange: function (e) {
    // console.log('changeswiper');
    var index = e.detail.current;
    if (e.detail.source && e.detail.source == 'touch') {
      this.switchNav(index);
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      path: '/pages/live/live?index=' + this.data.current
    };
  }
});