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

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

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

wxml：
 <view class="container"> <scroll-view class="navbar"
scroll-x="true" scroll-left="{{scrollNavbarLeft}}"> <view class="navbar-item
{{currentItems == navbarArray[item].id?'navbar-item-active':''}}" id="{{item}}"
wx:for="{{navbarShowIndexArray}}" catchtap="onTapNavbar"
data-itemid="{{navbarArray[item].id}}"> <view
class="navbar-item-wrap">{{navbarArray[item].title}}</view> </view>
</scroll-view> <scroll-view class="articles"
bindtouchstart="onTouchstartArticles" bindtouchend="onTouchendArticles"
hidden="{{articlesHide}}" bindscrolltolower="loadMore" scroll-y="{{true}}"
style='height: 300px;'> <view class='main' wx:for="{{mpList}}" wx:key="mpList"
wx:if="{{mpList !== ''}}"> <navigator url='ta?business_card_id={{item.id}}'>
<view class='user'> <view class='left'> <image class='tx'
src='{{item.avatar}}'></image> <image class='vip'
src='../images/vip.png'></image> </view> <view class='right'> <view
class='name'>{{item.name}}</view> <view class='gongsi'>{{item.industry}}</view>
</view> </view> <view class='jianjie'>{{item.introduce}}</view> </navigator>
</view> <view class='loadings' wx:if="{{loadings}}"> <image class='loadingss'
src='../images/loading.gif'></image> 正在加载更多数据 </view> <view class='nodatas'
wx:if="{{mpList == ''}}"> <image src='../images/nodata.png'></image>
<view>暂无数据</view> </view> </scroll-view> </view> 
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 () {} })
有什么不懂的，我贴出自己微信号。欢迎留言。

热门工具换一换

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