uniapp 文章列表功能 通俗易懂版

目录

功能简介

运行效果

代码演示

---

功能简介

该功能可以应对很多案例 

实现功能: 后端接口请求(分页后端实现) 下拉加载更多 上拉更新 item组件

运行效果

 

代码演示

温馨提示: 请求接口的封装链接详情 这里就不多介绍了 请求接口一样 

details.vue

<template>
	<view class="article-box">
         <article-item v-for="item in artList.list" :key="item.pkId" :article="item"></article-item>
	</view>
</template>

<script setup lang="ts">
	import {
		getArticleList
	} from '../../api/api.ts'
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		reactive
	} from "vue";
	import {
		InitData
	} from "../../type/article";
	//文章列表数据定义
	const artList = reactive(new InitData());
	//接口请求文章list数据
	const getlist = () => {	
		getArticleList(artList.articleList)
			.then((res) => {
				//请求到接口 停止刷新
				uni.stopPullDownRefresh();
				if(res.data !==null){
					//每次请求页数加一
					artList.articleList.pageNumVO.current++;
					artList.list=[
						// ... 是扩展运算符， 将list中的变量或者方法 提取出来并展开
						...artList.list,
						...res.data
					]
					return
				}
				//uni.showToast(OBJECT) 显示消息提示框。
				uni.showToast({
					title:'没有更多',
					icon:'none'
				})
			})
	}
	onLoad(() => {
		getlist()
	})
	//触底触发 加载更多文章
	onReachBottom(()=>{
		getlist()
	})
	//下拉刷新
	onPullDownRefresh(()=>{
		//文章数组重置
		artList.list=[];
		//请求页数归一
		artList.articleList.pageNumVO.current=1;
		//重新请求接口
		getlist();
	})
</script>

<style lang="scss" scoped>
	.article-box {
		width: 690upx; //根据微信定义设置  如非必要不建议改为100%；
		padding: 10upx 30upx;
		background-color: #f7f7f7;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

	}
</style>

article-item.vue

<template>
	<!-- 文章列表单个展示组件 -->
		<view class="art-item">
			<view class="art-img">
				<img :src="article.showPicUrl" class="img" alt="">
			</view>
			<view class="art-name">
				{{article.articleName}}
			</view>
			<view class="art-author">
				{{article.author}}
			</view>
		</view>
</template>

<script setup lang="ts">
  defineProps({
	  article:Object
  });
</script>

<style lang="scss">
	.art-item {
		//未设置高度
		width: 270upx;
		padding: 30upx;
		background: #fff;
		border-radius: 8upx;
		margin-top: 30upx;

		.art-img {
			width: 270upx;
			height: 270upx;
			border-radius: 12upx;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.art-name {
			width: 270upx;
			font-size: 32upx;
			line-height: 44upx;
			height: 88upx;
			padding-top: 15upx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			//文本超过俩行显示...
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}

		.art-author {
			width: 100%;
			height: 44upx;
			line-height: 44upx;
			padding-top: 15upx;
			font-size: 15upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #555500;
		}
	}
</style>

pages.json

 {
		"path": "pages/details/details",
		"style": {
			"navigationBarTitleText": "文章列表",
			//开启下拉刷新
			"enablePullDownRefresh": true
		}