JM-MiniApp/pages/wikipedia/index.vue

<script setup>
	// 引入依赖
	// import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue' 
	// import uniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue' 
	import { onLoad,onPullDownRefresh,onReachBottom } from "@dcloudio/uni-app"
	// import mySwiper from "@/components/mySwiper.vue"
	import {ref,onMounted,nextTick} from "vue"
	import {useStore} from '@/store/index.js'
	import api from "@/api/index"
	import emptyCard from "@/components/emptyCard.vue"
	// 生命周期
	onLoad(() => {
		getList()
	})
	 // 下拉刷新
	onPullDownRefresh(()=>{
		init()
		getList()
		// setTimeout(function () {
		// 	uni.stopPullDownRefresh();
		// }, 1000);
	}) 
	// 上拉触底
	onReachBottom(()=>{
		queryParams.value.page ++
		getList()
	})
	// 变量
	const queryParams = ref({
		page:1,
		pageSize:10
	})
	const list = ref([])
	// 方法
	function init() {
		queryParams.page = 1
		queryParams.pageSize = 10
		list.value = []
	}
	async function getList(){
		const res = await api.getArticleList(queryParams.value)
		if(res.code == 0) {
			if( res.data.list.length>0) {
				list.value.push(...res.data.list) 
			}
			else{
				queryParams.page-=1
			}
		}
		else{
			uni.showToast({
				title:'获取失败',
				icon:"error",
				duration:2000
			})
		}
	}
	function toDetail(item) {
		// let info = encodeURIComponent(JSON.stringify(item))
		// console.log(info)
		uni.navigateTo({
			url:"./detail?id="+item.ID
		})
	}
</script>
<template>
	<view class="articleBox page-box">
		<view class="userInfoBox">
			
		</view>
		<view class="list-box">
			<view v-if="list.length>0" class="lb-card" v-for="(item,i) in list" @tap="toDetail(item)">
				<view class="lb-left">
					<image :src="item.cover_img" mode="aspectFill"></image>
				</view>
				<view class="lb-right">
					<view class="lb-title">{{item.title}}</view>
					<view class="lb-content text-ellipsis-1 small-text" v-html="item.content"></view>
				</view>
			</view>
			<emptyCard v-else></emptyCard>
		</view>
	</view>
</template>
<style scoped lang="scss">
	.articleBox{
		.list-box{
			.lb-card{
				display: flex;
				align-items: center;
				padding: 20rpx;
				border-bottom: 2rpx solid #eaeaea;
				.lb-left{
					image{
						width: 120rpx;
						height: 120rpx;
						margin-right: 20rpx;
					}
				}
				.lb-right{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.lb-title{
						font-weight: 900;
						font-size:32rpx ;
						margin-bottom: 20rpx;
					}
				}
			}
		}
	}
</style>