uniapp做一个新闻类的demo演示-青年新闻2

还是接着前面的内容，我把代码贴出来。

项目截图

uniapp代码

pages index index.vue

<template>
	<view class="home">
		<scroll-view scroll-x class="nav-scorll">
			<view 
				class="item" 
				:class="navIndex == index ? 'active': ''" 
				v-for="(item,index) in navData" 
				:key="item.id" 
				@tap="clickNav(index,item.id)">
					{{item.classname}}
				</view>
		</scroll-view>
		
		<view class="content">
			<view class="row" v-for="(item,index) in newsData" :key="item.id">
				<newsbox :item="item" @tap.native="goDetail"></newsbox>
			</view>
		</view>
		
		<view class="nodata" v-if="!newsData.length">
			<text>此分类下，暂无数据!!!</text>
		</view>
		
		<view class="loading" v-if="newsData.length">
			<view v-if="loading === 1">数据加载中...</view>
			<view v-if="loading === 2">没有更多了~</view>
		</view>
		
		
	</view>
</template>

<script>
	import {getNavList,getNewsList} from '@/api/index/index.js'
	
	export default {
		data() {
			return {
				loading:0,  //0默认，1 加载中 ，2没有更多了
				//当前页
				currentPage:1,
				//每页条数
				pagesize:5,
				//分类索引id
				id:0,
				//导航栏索引
				navIndex:0,
				//分类索引数据
				navData:[],
				//新闻数据
				newsData:[]
			}
		},
		onLoad() {
			//获取索引
			this.getNavData();
			//获取新闻
			this.getNewsData();
			
		},
		//触底加载
		onReachBottom() {
			//如果已经触底，就不再多余发送请求
			if(this.loading == 2){
				return;
			}
			//
			this.currentPage++;
			//
			this.loading = 1;
			//
			this.getNewsData();
		},
		methods: {
			//获取新闻数据，默认50
			getNewsData(id=50){
				//通过id，在请求对应的新闻数据
				getNewsList({
					cid: id,
					num: this.pagesize,
					page: this.currentPage
				}).then(res=>{
					console.log(res);
					this.newsData.push(...res.data);
					if(res.data.length <= 0){
						console.log('没有了')
						//底部提示
						this.loading = 2;
						//弹窗提示
						uni.showToast({
							title:'没有更多新闻了！',
							icon:'none',
							mask:true,
							duration:2500
						})
					}
				})
			},
			//获取分类索引数据
			getNavData(){
				getNavList().then(res=>{
					//console.log(res);
					this.navData = res.data;
				})
			},
			//前往新闻详情页
			goDetail(){
				uni.navigateTo({
					url:'/pages/detail/detail'
				});
			},
			//点击导航滑动分类栏
			clickNav(index,id){
				//点击时保存当前索引值
				this.navIndex = index;
				//切换时，先重置数据
				this.newsData = [];
				this.currentPage = 1;
				this.loading = 0;
				//
				this.getNewsData(id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home{
		
		.nav-scorll{
			height: 100rpx;
			background-color: #f7f8fa;
			white-space: nowrap;
			position: fixed;
			top: var(--window-top);
			left: 0;
			z-index: 10;
			/deep/ ::-webkit-scrollbar{
				width: 4px !important;
				height: 1px !important;
				overflow: auto !important;
				background: transparent !important;
				-webkit-appearance: auto !important;
				display: block;
			}
			
			.item{
				font-size: 40rpx;
				line-height: 100rpx;
				display: inline-block;
				padding: 0 55rpx;
				color: #333;
				&.active{
					color: #31c27c;
				}
			}
		}
		
		.content{
			margin-top: 100rpx;
			padding: 30rpx;
			
			.row{
				border-bottom: 1px dotted #efefef;
				padding: 20rpx 0;
			}
		}
		
		.nodata{
			width: 100%;
			padding: 50rpx;
			color: #999;
			text-align: center;
		}
		
		.loading{
			text-align: center;
			font-size: 26rpx;
			color: #888;
			line-height: 2em;
		}
	}
</style>

api request.js

let baseUrl = 'https://ku.qingnian8.com/dataApi';

let instance  = (config) => {
	return new Promise((resolve,rejected)=>{
		uni.showLoading({
			title:'正在获取数据...',
			mask:true
		});
		
		uni.request({
			url: baseUrl + config.url,
			timeout: 5000,
			data:config.data,
			method: config.method,
			success(res){
				//成功
				if(res.statusCode == 200){
					resolve(res);
				}else{
					//请求失败，提示错误
					uni.showToast({
						title:res.errMsg,
						icon:'error',
						mask:true,
						duration:2000
					});
				}
				
			},
			complete() {
				//关闭提示
				uni.hideLoading();
			}
		})
	})
}

export default instance;

api index index.js

import request from '@/api/request.js'


export const getNavList = () => {
	return request({
		url:'/news/navlist.php',
		method: 'GET'
	})
}



export const getNewsList = (data)=>{
	return request({
		url:'/news/newslist.php',
		method:'GET',
		data:data
	})
}

测试