小程式 仿今日頭條 帶滑動切換的文章列表
阿新 • • 發佈：2019-01-07
拿別人仿今日頭條的程式碼做的改版，
首先感謝前輩。其次，這個程式碼雖然能用，但是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 () {} })
有什麼不懂的，我貼出自己微訊號。歡迎留言。
