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

发布时间：2018-07-19 09:41,

浏览次数：353

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

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

wxml：

scroll-x="true" scroll-left="{{scrollNavbarLeft}}">

wx:for="{{navbarShowIndexArray}}" catchtap="onTapNavbar"

data-itemid="{{navbarArray[item].id}}">

class="navbar-item-wrap">{{navbarArray[item].title}}

bindtouchstart="onTouchstartArticles" bindtouchend="onTouchendArticles"

hidden="{{articlesHide}}" bindscrolltolower="loadMore" scroll-y="{{true}}"

style='height: 300px;'>

wx:if="{{mpList !== ''}}">

src='{{item.avatar}}'>

src='../images/vip.png'>

class='name'>{{item.name}}

{{item.industry}}{{item.introduce}}

src='../images/loading.gif'>

正在加载更多数据

wx:if="{{mpList == ''}}">

暂无数据

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

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 () {} })

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