长列表示例

pages.json

@@ -582,6 +582,24 @@
       }
 
     }
+    ,{
+        "path" : "pages/component/long-list/long-list",
+        "style" :                                                                                    
+        {
+            "navigationBarTitleText": "长列表示例",
+            "enablePullDownRefresh": false
+        }
+        
+    }
+    ,{
+        "path" : "pages/component/long-list/detail/detail",
+        "style" :                                                                                    
+        {
+            "navigationBarTitleText": "详情示例",
+            "enablePullDownRefresh": false
+        }
+        
+    }
   ],
   "globalStyle": {
     "pageOrientation": "portrait",

pages/component/list/list.uvue

@@ -6,7 +6,7 @@
 		</view>
 		<list class="uni-list" refresher-enabled=true @refresherrefresh="onRefresherrefresh"
 			:refresher-triggered="refresherTriggered">
-			<cell v-for="(value, index) in listData" :key="index">
+			<cell v-for="(value, index) in listData" :key="index">
 				<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
 					<view class="uni-media-list">
 						<image class="uni-media-list-logo" :src="value.cover"></image>
@@ -19,20 +19,18 @@
 						</view>
 					</view>
 				</view>
-			</cell>
-			<cell class="footer"></cell>
-			
+			</cell>
 		</list>
 	</view>
 </template>
 
 <script>
-	import JSONObject from 'com.alibaba.fastjson.JSONObject';
+	import JSONObject from 'com.alibaba.fastjson.JSONObject';
 	import JSONArray from 'com.alibaba.fastjson.JSONArray';
 	type Banner = {
 		cover: string | null,
-		title: string | null,
-		post_id: string | null
+		title: string | null,
+		post_id: string | null
 	}
 	type Item = {
 		author_name: string,
@@ -51,18 +49,13 @@
 				banner: {} as Banner,
 				listData: [] as Item[],
 				last_id: '',
-				contentText: {
-					contentdown: '上拉加载更多',
-					contentrefresh: '加载中',
-					contentnomore: '没有更多'
-				},
 				pageVisible: false
 			};
 		},
 		onLoad() {
 			this.pageVisible = true;
 			this.getBanner();
-			this.getList();
+			this.getList();
 		},
 		onUnload() {
 			this.pageVisible = false;
@@ -75,17 +68,17 @@
 				uni.request({
 					url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
 					data: data,
-					success: data => {
-						if(this.pageVisible){
+					success: data => {
+						if(this.pageVisible){
 							this.refresherTriggered = false
 							if (data.statusCode == 200) {
-								let result = data.data as UTSJSONObject;
+								let result = data.data as UTSJSONObject;
 								this.banner = {
 									cover: result["cover"] as string,
-									title: result["title"] as string,
+									title: result["title"] as string,
 									post_id: result["post_id"] as string
 								} as Banner;
-							}
+							}
 						}
 					},
 					fail: (e) => {
@@ -94,61 +87,61 @@
 				});
 			},
 			getList() {
-				let url = "https://unidemo.dcloud.net.cn/api/news?column=id,post_id,title,author_name,cover,published_at";
-				if (this.last_id != "") {
-					const minId = (this.last_id).toInt();
-					const time = new Date().getTime() + '';
-					const pageSize = 10;
-					url = url + "&minId=" + minId + "&time=" + time + "&pageSize=" + pageSize;
-				}
-				
+				let url = "https://unidemo.dcloud.net.cn/api/news?column=id,post_id,title,author_name,cover,published_at";
+				if (this.last_id != "") {
+					const minId = (this.last_id).toInt();
+					const time = new Date().getTime() + '';
+					const pageSize = 10;
+					url = url + "&minId=" + minId + "&time=" + time + "&pageSize=" + pageSize;
+				}
+				
 				uni.request({
 					url: url,
 					method:"GET",
-					success: (data) => {
+					success: (data) => {
 						if(this.pageVisible){
-							if (data.statusCode == 200) {
-								const result = data.data as UTSJSONObject
-								let list = this.setTime(result);
-								this.listData = list.concat(this.listData);
-								console.log("after ",this.listData.size);
-								this.last_id = listData[0].id + "";
-								this.refresherTriggered = false;
-							}
+							if (data.statusCode == 200) {
+								const result = data.data as UTSJSONObject
+								let list = this.setTime(result);
+								this.listData = list.concat(this.listData);
+								this.last_id = listData[0].id + "";
+								this.refresherTriggered = false;
+							}
 						}
 					},
-					fail: (res) => {
+					fail: (res) => {
 						if(this.pageVisible){
-							console.log('fail', res);
-							this.refresherTriggered = false
+							console.log('fail', res);
+							this.refresherTriggered = false
 						}
 					}
 				});
 			},
-			goDetail(e: Item) {
-				const detail = e;
-				const post_id = detail.post_id;
-				const cover = detail.cover;
-				const title = detail.title;
-				uni.navigateTo({
-					url: 'pages/component/list/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
-				});
-			},
-			bannerClick(e:Banner){
-				const detail = e;
-				const post_id = detail.post_id;
-				const cover = detail.cover;
-				const title = detail.title;
+			goDetail(e: Item) {
+				console.log("eeee",e);
+				const detail = e;
+				const post_id = detail.post_id;
+				const cover = detail.cover;
+				const title = detail.title;
 				uni.navigateTo({
 					url: 'pages/component/list/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
 				});
+			},
+			bannerClick(e:Banner){
+				const detail = e;
+				const post_id = detail.post_id;
+				const cover = detail.cover;
+				const title = detail.title;
+				uni.navigateTo({
+					url: 'pages/component/list/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
+				});
 			},
 			setTime(items: UTSJSONObject): Item[] {
 				let newItems = [] as Item[];
-				if (items.isJSONArray()) {
+				if (items.isJSONArray()) {
 					const array = items.toJSONObject() as JSONArray;
 					for (let i = array.size - 1; i >= 0; i--) {
-						const e = array.get(i) as JSONObject;
+						const e = array.get(i) as JSONObject;
 						newItems.push({
 								author_name: e["author_name"] as string,
 								cover: e["cover"] as string,
@@ -161,11 +154,11 @@
 				}
 				return newItems;
 			},
-			onRefresherrefresh() {
-				if(this.pageVisible){
+			onRefresherrefresh() {
+				if(this.pageVisible){
 					this.refresherTriggered = true
 					this.getBanner();
-					this.getList();
+					this.getList();
 				}
 			}
 		}
@@ -195,7 +188,6 @@
 		font-weight: 400;
 		line-height: 42rpx;
 		color: white;
-		/* z-index: 11; */
 	}
 
 	.uni-media-list {
@@ -211,27 +203,27 @@
 		height: 140rpx;
 	}
 
-	.uni-media-list-body {
-		flex: 1;
+	.uni-media-list-body {
+		flex: 1;
 		padding-left: 15rpx;
 		justify-content: space-around;
 	}
 
 	.uni-media-list-text-top {
 		/* height: 74rpx; */
-		font-size: 28rpx;
-		lines:2;
+		font-size: 28rpx;
+		lines:2;
 		overflow: hidden;
 	}
 
 	.uni-media-list-text-bottom {
 		display: flex;
-		flex-direction: row;
+		flex-direction: row;
 		justify-content: space-between;
-	}
-	
-	.uni-media-list-text {
-		color: #9D9D9F;
-		font-size: 25rpx;
+	}
+	
+	.uni-media-list-text {
+		color: #9D9D9F;
+		font-size: 25rpx;
 	}
 </style>
\ No newline at end of file

pages/component/long-list/detail/detail.uvue

+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+
+</style>

pages/component/long-list/long-list.uvue

+<template>
+	<view style="width: 100%;height: 100%;">
+		<list class="uni-list" refresher-enabled=true @refresherrefresh="onRefresherrefresh"
+			:refresher-triggered="refresherTriggered">
+			<cell v-for="(value, index) in listData" :key="index">
+				<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
+					<view class="uni-media-list">
+						<image class="uni-media-list-logo" :src="value.img"></image>
+						<view class="uni-media-list-body">
+							<text class="uni-media-list-text-top">{{ value.title }}</text>
+							<view class="uni-media-list-text-bottom">
+								<text class="uni-media-list-text">{{ value.subTitle }}</text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</cell>
+		</list>
+	</view>
+</template>
+
+<script>
+import JSONObject from 'com.alibaba.fastjson.JSONObject';
+	type Item = {
+		title: string
+		subTitle: string,
+		img: string,
+		detail: string,
+	}
+
+
+	export default {
+		data() {
+			return {
+				refresherTriggered: false,
+				listData: [] as Item[],
+				last_id: '',
+				pageVisible: false
+			};
+		},
+		onLoad() {
+			this.pageVisible = true;
+			this.getList();
+		},
+		onUnload() {
+			this.pageVisible = false;
+		},
+		methods: {
+			getList() {
+				const content = UTSAndroid.getFileContent("static/list-mock/mock.json");
+				if (content != null){
+					const items = [] as Item[];
+					const jsonArr = JSON.parse(content);
+					jsonArr?.forEach((res)=>{
+						const json = res as JSONObject;
+						console.log("json :",json);
+						const title = json["title"] as string;
+						const subTitle = json["subTitle"] as string;
+						const img = json["img"] as string;
+						const detail = json["detail"] as string;
+						const item:Item = {
+							title,
+							subTitle,
+							img,
+							detail
+						}
+						items.push(item);
+					})
+					let temp = [] as Item[];
+					for(let i = 0; i < 100; i++){
+						temp = temp.concat(items);
+					}
+					listData = temp;
+					console.log("size :",listData.size);
+				}
+				
+				setTimeout(()=>{
+					this.refresherTriggered = false
+				},0);
+			},
+			goDetail(e: Item) {
+				uni.navigateTo({
+					url: 'pages/component/long-list/detail/detail'
+				});
+			},
+			onRefresherrefresh() {
+				if(this.pageVisible){
+					this.refresherTriggered = true
+					this.getList();
+				}
+			}
+		}
+	};
+</script>
+
+<style>
+	.uni-media-list {
+		padding: 22rpx 30rpx;
+		box-sizing: border-box;
+		display: flex;
+		width: 100%;
+		flex-direction: row;
+	}
+
+	.uni-media-list-logo {
+		width: 180rpx;
+		height: 140rpx;
+	}
+
+	.uni-media-list-body {
+		flex: 1;
+		padding-left: 15rpx;
+	}
+
+	.uni-media-list-text-top {
+		font-size: 28rpx;
+		lines:2;
+		overflow: hidden;
+	}
+
+	.uni-media-list-text-bottom {
+		display: flex;
+		margin-top: 10rpx;
+	}
+	
+	.uni-media-list-text {
+		color: #9D9D9F;
+		font-size: 25rpx;
+	}
+</style>
\ No newline at end of file

pages/tabBar/component.uvue

@@ -69,8 +69,14 @@
                             enable: false
                         },
                         // #endif
+						{
+							name:'list（新闻）',
+							url:"pages/component/list/list",
+							enable:true
+						},
 						{
 							name:'list',
+							url:"pages/component/long-list/long-list",
 							enable:true
 						}
                     ] as Page[]

static/list-mock/mock.json

+[{
+	"title": "灵魂拷问：你做的应用安全吗？",
+	"subTitle": "功能都能实现，至于安全嘛",
+	"img": "static/list-mock/safe.png",
+	"detail": "12345678"
+},{
+	"title": "云对象-重新定义前后端交互",
+	"subTitle": "更清晰的逻辑、更少的代码、更低的协作成本、更好的语法提示",
+	"img": "static/list-mock/unicloud.png",
+	"detail": "12345678"
+},
+{
+	"title": "庆贺：uni-app海外月活设备过亿",
+	"subTitle": "2022，让我们卷向海外吧",
+	"img": "static/list-mock/internation.png",
+	"detail": "12345678"
+}]
\ No newline at end of file