长列表示例

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

@@ -20,8 +20,6 @@
 					</view>
 				</view>
 			</cell>
-			<cell class="footer"></cell>
-			
 		</list>
 	</view>
 </template>
@@ -51,11 +49,6 @@
 				banner: {} as Banner,
 				listData: [] as Item[],
 				last_id: '',
-				contentText: {
-					contentdown: '上拉加载更多',
-					contentrefresh: '加载中',
-					contentnomore: '没有更多'
-				},
 				pageVisible: false
 			};
 		},
@@ -111,7 +104,6 @@
 								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;
 							}
@@ -126,6 +118,7 @@
 				});
 			},
 			goDetail(e: Item) {
+				console.log("eeee",e);
 				const detail = e;
 				const post_id = detail.post_id;
 				const cover = detail.cover;
@@ -195,7 +188,6 @@
 		font-weight: 400;
 		line-height: 42rpx;
 		color: white;
-		/* z-index: 11; */
 	}
 
 	.uni-media-list {

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