dreamland/pages/index/news.vue

<template>
<gui-page :fullPage="true" ref="guiPage" :customFooter="true" :isLoading="pageLoading" iphoneXButtomStyle="background:#F8F8F8" :footerSets="{height:150, zIndex:100, bg:'none'}">
	<view slot="gBody" class="gui-flex1" style="background-color:#F8F8F8;">
		<view class="gui-margin-top gui-bg-gray search-warp gui-border-box" style="display: none;">
			<gui-search @inputting="inputting" @confirm="confirm"></gui-search>
		</view>
		<!-- 分类导航 -->
		<view class="header gui-border-b gui-border-box gui-flex gui-columns gui-justify-content-center" 
		id="myheader">
			<gui-switch-navigation :size="150" 
			 activeLineBg="linear-gradient(to right, #008AFF,#008AFF)"
			:items="fetch.cate" @change="navchange"></gui-switch-navigation>
		</view>
		<!-- 滚动区域高度 = gBody - 自定义区域高度 -->
		<scroll-view :scroll-y="true" :show-scrollbar="false" 
		:style="{height:mainHeight+'px'}" 
		@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
		@scrolltolower="loadmorefun" @scroll="scroll">
			<!-- 刷新组件 -->
			<gui-refresh @reload="reload" ref="refreshcom"></gui-refresh>
			<!-- 数据展示区域 -->
			<view>
				<gui-article-list :articles="newsList" @newstap="newstap"></gui-article-list>
			</view>
			<!-- 加载组件 -->
			<gui-loadmore  ref="loadmorecom"></gui-loadmore>
		</scroll-view>
	</view>
	<foot ref="foot" slot="gFooter" :value="foot_value"></foot>
</gui-page>
</template>
<script>
var graceJs = require('@/lib/GraceUI5/js/grace.js');
import foot from '@/pages/index/foot.vue';
export default {
	data() {
		return {
			foot_value : 1,
			fetch : {
				cate : [],
				info : [],
			},
			// 主体高度
			mainHeight    : 200,
			// 滚动区域滚动距离
			scrollTop     : 0,
			// 加载更多延迟
			loadMoreTimer : null,
			// 当前展示的分类索引
			cate_index  : 0,
			// 新闻列表数据， 分类切换重新获取第一页
			newsList      : [],
			// 页码
			page          : 1
		}
	},
	components:{
		foot
	},
	onShow() {
		this.$nextTick(function() {
			this.$refs.foot.cur = this.foot_value;
		});
	},
	onLoad:function(){
		this.getInfo();
		// 01. 获取页面主体高度
		graceJs.getRefs('guiPage', this, 0, (ref)=>{
			ref.getDomSize('guiPageBody', (e)=>{
				// 主体高度 = 页面高度 - 自定义区域高度
				graceJs.select('#myheader', (e2)=>{
					// 如果自定义区域有 margin 尺寸获取不到请加上这个值，可以利用 uni.upx2px() 转换
					this.mainHeight  = e.height - e2.height;
					// 第一次加载数据
					this.getData();
				});
			});
		});
	},
	// 重新加载
	onPullDownRefresh: function() {
		this.getInfo();
	},
	methods : {
		navchange:function(index){
			// 刷新当前分类对应的数据
			if(this.cate_index != index){
				this.page = 1;
				this.cate_index = index;
				this.getData(false);
				// 重置加载组件状态
				this.$refs.loadmorecom.stoploadmore();
			}
		},
		getInfo : function() {
			var self = this;
			var data = {};
			
			this.Dever.get(this, 'package/article/?l=api.cate', data);
		},
		// 新闻加载函数
		// isReload 代表下拉刷新
		getData : function (isReload) {
			var self = this;
			var data = {};
			if (this.fetch.cate.length > 0) {
				data.cate = this.fetch.cate[this.cate_index].id;
			} else {
				data.cate = 0;
			}
			data.noloading = 1;
			this.Dever.get(this, 'package/article/?l=api.getList', data, function(t) {
				if(self.page >= 2){
					if(t.info.length <= 0){
						self.$refs.loadmorecom.nomore();
					} else {
						self.newsList = self.newsList.concat(t.info);
						// 加载完成后停止加载动画
						self.$refs.loadmorecom.stoploadmore();
					}
				} else{
					self.newsList    = [];
					self.newsList    = t.info;
					// 刷新
					if(isReload){self.$refs.refreshcom.endReload();}
				}
				self.page++;
			});
			
		},
		scroll : function(e){
			this.scrollTop	= e.detail.scrollTop;
		},
		// 下拉刷新相关事件绑定
		touchstart : function (e){
			if(this.scrollTop > 0){return ;}
			this.$refs.refreshcom.touchstart(e);
		},
		touchmove : function(e){
			if(this.scrollTop > 0){return ;}
			this.$refs.refreshcom.touchmove(e);
		},
		touchend : function (e) {
			if(this.scrollTop > 0){return ;}
			this.$refs.refreshcom.touchend(e);
		},
		// 刷新事件
		reload : function(){
			this.page = 1;
			this.getData(true);
			// 刷新时重置加载组件状态
			this.$refs.loadmorecom.stoploadmore();
		},
		// 加载更多事件
		loadmorefun : function(){
			// 获取加载组件状态看一下是否还能继续加载
			// 保证触底只执行一次加载
			if(this.loadMoreTimer != null){clearTimeout(this.loadMoreTimer);}
			this.loadMoreTimer =  setTimeout(() => {
				var status = this.$refs.loadmorecom.loadMoreStatus;
				if(status != 0){return null;}
				this.$refs.loadmorecom.loading();
				// 此处开启加载动画执行加载数据的函数
				this.getData(1);
			}, 80);
		},
		// 新闻点击
		newstap : function (e) {
			// 获取新闻 id
			var id = e;
			this.Dever.location('index/news_view?id=' + id);
		},
		// 监听输入
		inputting : function(e){
			console.log(e);
		},
		// 监听提交
		confirm : function (e) {
			console.log(e);
		},
		// 监听点击
		tapme:function(){
			uni.showToast({
				title:"被点了...."
			});
		}
	}
}
</script>
<style>
.header{padding:15rpx 30rpx; height:100rpx;}
.search-warp{width:750rpx; padding:15rpx 50rpx;}
</style>