uni-app tab切换和下拉刷新，上拉加载更多实现；_uniapp 多tab切换 下拉刷新 加载更多

使用uni-app 组件实现下拉刷新，上拉加载更多的功能效果：

代码实现如下：

 
 <template>
    <view>
		<!-- 搜索导航跳转 -->
		  <view class="btn-area">
				<navigator open-type="navigate" animation-type="pop-in" animation-duration="300" url="./test/HMsearch">  
					<view class="uni-form-item uni-column"><icon class="iconsearc" type="search" size="18"/> 搜索</view>
				</navigator> 
		  </view>
		  <!-- 加载的内容 -->
		<wuc-tab :tab-list="tabList" :tabCur.sync="TabCur" :textFlex.sync="textFlex" tab-class="text-center text-black bg-white" select-class="text-orange text-xl"  @change="tabChange">
		</wuc-tab>
		<div  class="cu-bar bg-white solid-bottom">
		   <div class="action">
				<text class="cuIcon-titles text-orange"></text> 
				<div class="bg-white padding margin text-center text-block">
				 <!-- 分页的数据列表 -->  
					<view> 
						<view class="list" v-for="(item,index) in newsList" :key="index">
							<view class="list-left">
								<image :src="item.img"></image>
							</view>
							<view class="list-right">
								<view class="list-top">
									<text class="elli">{{item.title}}</text>
									<text>{{item.public_time}}</text>
								</view>
								<view class="list-con elli3">{{item.content}}</view>
							</view>
						</view>
						<text class="loading-text">
						{{loadingType === 0 ? contentText.contentdown : (loadingType === 1 ? contentText.contentrefresh : contentText.contentnomore)}}</text>
					</view> 
				</div>  
		   </div>
		</div>  
    </view>
</template> 
 <script>  
	import uniDrawer from "@/components/uni-drawer/uni-drawer" 
	import WucTab from '@/components/wuc-tab/wuc-tab.vue'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";	
	 var  _self,page = 1;
	 export default { 
		components: {uniDrawer,WucTab,uniLoadMore}, 
		data() {
			return {
				 title: 'navigator', 
				 TabCur: 0,
				 textFlex:true,//是否平分 
				 tabList: [{ name: '精选' }, { name: '订阅' }],
				 newsList:[],
				loadingType: 0,
				contentText: {
					pullRefreshStatus:false,//下拉刷新
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				} 
			} 
		}, 
		onLoad: function (options) {
			_self = this;
			this.getNewsList();
		},
		// 下拉刷新
		onPullDownRefresh:function () {
			_self = this;  
			uni.startPullDownRefresh();//得到数据后停止下拉刷新
			_self.getNewsList();
		},
		// 上拉加载
		onReachBottom: function() {
			//console.log(_self.newsList.length);
			if (_self.loadingType != 0) {//loadingType!=0;直接返回
				return false;
			}
			_self.loadingType = 1;
			uni.showNavigationBarLoading();//显示加载动画
			uni.request({
				url:'/api/items?page='+page,
				success: function(res) {
					if (_self.newsList.length==res.data.pages_count) {//没有数据
						_self.loadingType = 2;
						uni.hideNavigationBarLoading();//关闭加载动画
						return false;
					}
					page++;//每触底一次 
					for(var i=_self.newsList.length;i<res.data.pages_count;i++){
						_self.newsList = _self.newsList.concat(res.data.data[i]);//将数据拼接在一起
					}
					_self.loadingType = 0;//将loadingType归0重置 
					uni.hideNavigationBarLoading();//关闭加载动画
					
				}
			});
		}, 
		methods: {
		    tabChange(index) {
		        this.TabCur = index;
		    },
			getNewsList: function() {//第一次回去数据
				_self.loadingType = 0;
				uni.showNavigationBarLoading();
				uni.request({
					url: '/api/items?page=1',
					success: function(res) {
						let newsList =[];
						for(var i=0;i<6;i++){
							newsList.push(res.data.data[i]);
						}
						 _self.contentText.pullRefreshStatus=false;
						_self.newsList = newsList;
						if(res.data.pages_count==res.data.data.length){
							uni.showToast({
								title: '已是最新',
								duration: 2000
							});
						}
						uni.hideNavigationBarLoading();
						uni.stopPullDownRefresh();//得到数据后停止下拉刷新
					}
				}); 
			} 
		}
	 };
</script>
<style lang="scss"> 
	 .uni-column{
	 	margin-top: 15px;
	 	margin-bottom: 15px;
	 	padding-left: 20px;
	 	padding-right: 10px;
	 	padding-top: 10px;
	 	padding-bottom: 10px;
	 	border-radius: 25px;
	 	background-color: #eee;
	 	color:#333;
	 	font-size: 14px;
	 	text-align: center;
	 }
	 .uni-column .iconsearc{
	 	margin-right: 10px;
	 	vertical-align: middle;
	 }
	 .text-orange,.active{
	     color:#ff6c00;
	 } 
	 .elli{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.elli2{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.elli3{
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}
	.list{
		width: 94%;
		display: flex;
		flex-direction: row;
		padding: 3%;
		border-bottom: 1upx solid #ebe8e8;
		.list-left{
			width: 35%;
			margin-right: 3%;
			image{
				width: 220upx;
				height: 140upx;
				padding: 3%;
				border: 1upx solid #ebe8e8;
				box-sizing: border-box;
			}
		}
		.list-right{
			width: 65%;
			color: #999999;
			font-size: 24upx;
			.list-top{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-bottom: 5upx;
				text{
					&:nth-child(1){
						color: #333;
						font-size: 30upx;
						width: 65%;
					}
				}
			}
		}
	}
	.loading-text{
		height: 80upx;
		line-height: 80upx;
		font-size: 26upx;
		color:#ccc;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	} 
</style>

注：以上内容仅供项目参考！