小程序 仿今日头条 带滑动切换的文章列表

拿别人仿今日头条的代码做的改版，

首先感谢前辈。其次，这个代码虽然能用，但是js里还是存在一些BUG。希望后辈再做改版。

wxml：

  
    
      {{navbarArray[item].title}}
    
  
  

wxss：

/* 今日头条 */
.navbar {
  position: fixed;
  top: 0;
  z-index: 4;
  border-bottom: 1px solid #ececec;
  height: 80rpx;
  font-size: 16px;
  white-space: nowrap;
  background-color: #f5f6f7;
}

.navbar-item {
  display: inline-block;
  width: calc(750rpx / 5);
  height: 100%;
}

.navbar-item-active {
    color: #3bc6da;
    box-sizing: border-box;
}
.navbar-item-wrap {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.loading-modal {
  display: flex;
  position: fixed;
  z-index: 3;
  width: 100%;
  height: 100%;
  background-color: #fff;
  align-items: center;
  justify-content: center;
}

.loading-text-wrap {
  padding-bottom: 200rpx;
}

.loading-text {
  font-size: 50px;
  color: #cfcfcf;
}

.articles {
  margin-top: 80rpx;
  min-height: calc(100% - 80rpx);
}

.article {
  display: flex;
  border-bottom: 1px solid #ececec;
  height: 80px;
  align-items: center;
  justify-content: center;
}
.nodatas{
  width: 750rpx;
  text-align: center;
  background: #fff;
  font-size: 24rpx;
  line-height: 40rpx;
  color: #999;
  padding: 100rpx 0;
}
.nodatas image{
  width: 200rpx;
  height: 140rpx;
  margin:60rpx auto;
}

js是重点。有很多bug，希望后面用的代码的做一些改版。所以我把js全部贴出来，不止有滑动切换点击切换。还有我

上面自己加的上拉加载下拉刷新。scroll-view 不支持上拉下拉。所以用了其他方式实现。代码能用，但是我自己不太满意。

大家看着删吧。

var app = getApp();
Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    itemid:'',
    currentItems: '',
    listlenth: '',
    withss:'',
    //今日头条
    navbarArray: [],
    navbarShowIndexArray: Array.from(Array(12).keys()),
    navbarHideIndexArray: [],
    windowWidth: 375,
    scrollNavbarLeft:0,
    currentChannelIndex: 0,
    startTouchs: {
      x: 0,
      y: 0
    },
    channelSettingModalHide: true,
    articlesHide: false,
    articleContent: '',
    loadingModalHide: false,
    temporaryArray: Array.from(new Array(11), (val, index) => index + 1),
    page:2,
    loadings: false,
    loadingsbg:true,
  },
  //事件处理函数
  onLoad:function(){
    var that = this;
    //获取内容
    wx.request({
      url: app.config.apiUrl + 'Api/Information/getInformation',
      method: 'POST',
      header: {
        'content-type': 'application/json'
      },
      data: {
        cmd: 'get_informations',
        page: 1,
        per_page: 10,
        category: 1
      },
      success: function (res) {
        if (res.data.code == 0) {
          that.setData({
            navbarArray: res.data.data.cate_data,
            mpList: res.data.data.information_data,
            currentItems: res.data.data.cate_data[0].id,
            itemid: res.data.data.cate_data[0].id,
            listlenth: res.data.data.cate_data.length,
            withss: 150 * res.data.data.cate_data.length,
            navbarShowIndexArray: Array.from(Array(res.data.data.cate_data.length + 1).keys()),
          })
        }
      }
    }); 
  },
  // 今日tt
  onPullDownRefresh: function () {
    wx.stopPullDownRefresh();
  },
  //点击nav时候切换页面
  onTapNavbar: function (e) {
    var that = this;
   
    this.switchChannel(parseInt(e.currentTarget.id));
    var itemid = e.currentTarget.dataset.itemid;
    var itemids = e.currentTarget.dataset.itemids;
    
    that.setData({
      itemid: itemid,
      currentItems: itemid
    })
  },
  switchChannel: function (targetChannelIndex) {
    this.getArticles(targetChannelIndex);
    let navbarArray = this.data.navbarArray;
    navbarArray.forEach((item, index, array) => {
      item.type = '';
    });
    this.setData({
      navbarArray: navbarArray,
      currentChannelIndex: targetChannelIndex
    });
  },
  getArticles: function (index) {
    var that = this;
    var itemid = that.data.navbarArray[index].id;
    that.setData({
      loadingModalHide: false,
      articleContent: '',
      currentItems: itemid,
    });
    that.setData({
      scrollTop: 0
    })

      //再调用接口改变main的值
    wx.request({
      url: app.config.apiUrl + 'Api/Information/getInformation',
      method: 'POST',
      header: {
        'content-type': 'application/json'
      },
      data: {
        cmd: 'get_informations',
        page: 1,
        per_page: 10,
        category_id: that.data.currentItems,
      },

      success: function (res) {
        if (res.data.code == 0) {
          that.setData({
            mpList: res.data.data.information_data,
            page: 2
          })
          
        }
      }
    });
  },
  //滑动main模块切换页面
  onTouchstartArticles: function (e) {
    var that = this
    that.setData({
      'startTouchs.x': e.changedTouches[0].clientX,
      'startTouchs.y': e.changedTouches[0].clientY,
    });
  },
  onTouchendArticles: function (e) {
    var that = this;
    var diyi = that.data.item;
    var listlenth = that.data.listlenth;
    var geshu = that.data.geshu;
    var navbarArray = this.data.currentChannelIndex
    let deltaX = e.changedTouches[0].clientX - this.data.startTouchs.x;
    let deltaY = e.changedTouches[0].clientY - this.data.startTouchs.y;
    var itemids = e.currentTarget.dataset.itemids;

    if (deltaX > 60 || deltaX<-60){
      that.setData({
        scrollTop: 0,
      });
    }
    if (deltaX < 0 && navbarArray > 3) {
      that.setData({
        scrollNavbarLeft: 80
      });
    } else if (deltaX > 0 && navbarArray < 5) {
      that.setData({
        scrollNavbarLeft: 0
      });
    } else if (deltaX > 0 && navbarArray > 5) {
      that.setData({
        scrollNavbarLeft: 80 * navbarArray
      });
    } else {
      that.setData({
        scrollNavbarLeft: -80 * navbarArray
      });
    }
    if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > listlenth) {
      let deltaNavbarIndex = deltaX > 0 ? -1 : 1;
      let currentChannelIndex = this.data.currentChannelIndex;
      let navbarShowIndexArray = this.data.navbarShowIndexArray;
      let targetChannelIndexOfNavbarShowIndexArray = navbarShowIndexArray.indexOf(currentChannelIndex) + deltaNavbarIndex;
      let navbarShowIndexArrayLength = listlenth;
      if (targetChannelIndexOfNavbarShowIndexArray >= 0 && targetChannelIndexOfNavbarShowIndexArray <= navbarShowIndexArrayLength - 1) {
        let targetChannelIndex = navbarShowIndexArray[targetChannelIndexOfNavbarShowIndexArray];
        if (navbarShowIndexArrayLength > listlenth) {
          let scrollNavbarLeft;
          if (targetChannelIndexOfNavbarShowIndexArray < listlenth-1) {
            scrollNavbarLeft = 0;
          } else if (targetChannelIndexOfNavbarShowIndexArray === navbarShowIndexArrayLength - 1) {
            scrollNavbarLeft = this.rpx2px(110 * (navbarShowIndexArrayLength - listlenth));
          } else {
            scrollNavbarLeft = this.rpx2px(110 * (targetChannelIndexOfNavbarShowIndexArray - listlenth-1));
          }
          this.setData({
            scrollNavbarLeft: scrollNavbarLeft,
          });
        }
        this.switchChannel(targetChannelIndex);
      }
    }
  },
  rpx2px: function (rpx) {
   
    return this.data.windowWidth * rpx / 750;
  },
  storeNavbarShowIndexArray: function (){
    wx.setStorage({
      key: 'navbarShowIndexArray',
      data: this.data.navbarShowIndexArray
    }); 
   
  },
  //今日头条结束
  //上拉事件
  loadMore:function(e) { // 触底加载更多
   var that = this
   that.setData({
     loadings: true,
   })
   setTimeout(function(){
     //加载中
     that.setData({
       loadings: false,
       loadingsbg: false,
     })
     // 页数 
     var page = that.data.page;
     wx.request({
       url: app.config.apiUrl + 'Api/Information/getInformations',
       method: 'POST',
       header: {
         'content-type': 'application/json'
       },
       data: {
         cmd: 'get_informations',
         page: page,
         per_page: 10,
         category_id: that.data.currentItems,
       },
       success: function (res) {
         if (res.data.code == 0) {
           var mpList = that.data.mpList.concat(res.data.data.information_data)
           that.setData({
             mpList: mpList,
             page: page+1,
             loadings: false,
             loadingsbg: false,
           })
             
         }
       }
     });
   },1500)
  },
//上拉事件end
  onShareAppMessage: function () {}
})

有什么不懂的，我贴出自己微信号。欢迎留言。