修改list例子

common/uni.css

@@ -44,7 +44,6 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    padding-left: 30rpx;
     border-bottom: 1px solid #c8c7cc;
 }
 

pages.json

@@ -554,6 +554,15 @@
             }
             
         }
+        ,{
+            "path" : "pages/component/list/detail/detail",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
     "globalStyle": {
         "pageOrientation": "portrait",

pages/component/list/detail/detail.uvue

+<template>
+	<view>
+		<view class="banner">
+			<image class="banner-img" :src="cover"></image>
+			<text class="banner-title">{{title}}</text>
+		</view>
+		<view class="article-content">
+			<text>{{htmlNodes}}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+
+	export default {
+		data() {
+			return {
+				htmlNodes: "",
+				pageVisible: false,
+				title: '',
+				cover : "",
+				post_id : "",
+			}
+		},
+		onLoad(event) {
+			console.log("event",event);
+			this.pageVisible = true;
+			this.post_id = event["post_id"] ?? "";
+			this.cover = event["cover"] ?? "";
+			this.title = event["title"] ?? "";
+			this.getDetail();
+		},
+		onUnload() {
+			this.pageVisible = false;
+		},
+		methods: {
+			getDetail() {
+				uni.request({
+					url: 'https://unidemo.dcloud.net.cn/api/news/36kr/' + this.post_id,
+					success: (data) => {
+						if (data.statusCode == 200) {
+							const result = data.data as UTSJSONObject
+							// var htmlString = result["content"].replace(/\\/g, "").replace(/<img/g, "<img style=\"display:none;\"");
+							this.htmlNodes = result["content"] as string;
+						}
+					},
+					fail: () => {
+						console.log('fail');
+					}
+				});
+			},
+		}
+	}
+</script>
+
+<style>
+	.banner {
+		height: 360rpx;
+		overflow: hidden;
+		position: relative;
+		background-color: #ccc;
+	}
+
+	.banner-img {
+		width: 100%;
+	}
+
+	.banner-title {
+		max-height: 84rpx;
+		overflow: hidden;
+		position: absolute;
+		left: 30rpx;
+		bottom: 30rpx;
+		width: 90%;
+		font-size: 32rpx;
+		font-weight: 400;
+		line-height: 42rpx;
+		color: white;
+		z-index: 11;
+	}
+
+	.article-meta {
+		padding: 20rpx 40rpx;
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		color: gray;
+	}
+
+	.article-text {
+		font-size: 26rpx;
+		line-height: 50rpx;
+		margin: 0 20rpx;
+	}
+
+	.article-author,
+	.article-time {
+		font-size: 30rpx;
+	}
+
+	.article-content {
+		padding: 0 30rpx;
+		overflow: hidden;
+		font-size: 30rpx;
+		margin-bottom: 30rpx;
+	}
+</style>

pages/component/list/list.uvue

 <template>
-	<view style="height: 100%;width: 100%;">
-		<page-head :title="title"></page-head>
-		<view class="container">
-			<list class="uni-list-inner" :refresher-enabled="true" @refresherrefresh="onRefresherrefresh"
-				:refresher-triggered="refresherTriggered">
-				<cell v-for="(item, index) in dataList" :key="item.id">
-					<view class="list-item">
-						<text class="list-item-title" :value="item.name"></text>
-					</view>
-				</cell>
-			</list>
+	<view style="width: 100%;height: 100%;">
+		<view class="banner">
+			<image class="banner-img" :src="banner.cover"></image>
+			<text class="banner-title">{{ banner.title }}</text>
 		</view>
+		<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.cover"></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.author_name }}</text>
+								<text class="uni-media-list-text">{{ value.published_at }}</text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</cell>
+			<cell class="footer"></cell>
+			
+		</list>
 	</view>
 </template>
-<script lang="ts">
-	import RefresherEvent from 'io.dcloud.uniapp.runtime.RefresherEvent';
+
+<script>
+	import JSONObject from 'com.alibaba.fastjson.JSONObject';
+	import JSONArray from 'com.alibaba.fastjson.JSONArray';
+	type Banner = {
+		cover: string | null,
+		title: string | null,
+	}
 	type Item = {
-		id : string,
-		name : string
+		author_name: string,
+		cover: string,
+		id: number,
+		post_id: string,
+		published_at: string,
+		title: string
 	}
+
+
 	export default {
 		data() {
 			return {
-				title: 'list',
 				refresherTriggered: false,
-				dataList: [] as Item[],
-			}
+				banner: {} as Banner,
+				listData: [] as Item[],
+				last_id: '',
+				reload: false,
+				status: 'more',
+				contentText: {
+					contentdown: '上拉加载更多',
+					contentrefresh: '加载中',
+					contentnomore: '没有更多'
+				},
+				pageVisible: false
+			};
 		},
 		onLoad() {
-			for (var i = 0; i < 25; i++) {
-				const item : Item = { id: i + "", name: "item " + i }
-				this.dataList.push(item)
-			}
+			this.pageVisible = true;
+			this.getBanner();
+			this.getList();
+		},
+		onUnload() {
+			this.pageVisible = false;
 		},
 		methods: {
-			onRefresherrefresh(e : RefresherEvent) {
+			getBanner() {
+				let data = {
+					column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
+				};
+				uni.request({
+					url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
+					data: data,
+					success: data => {
+						// uni.stopPullDownRefresh();
+						this.refresherTriggered = false
+						if (data.statusCode == 200) {
+							let result = data.data as UTSJSONObject;
+							this.banner = {
+								cover: result["cover"] as string,
+								title: result["title"] as string
+							} as Banner;
+						}
+					},
+					fail: (e) => {
+						console.log('fail', e);
+					}
+				});
+			},
+			getList() {
+				let data = {
+					column: 'id,post_id,title,author_name,cover,published_at', //需要的字段名
+				};
+				if (this.last_id != "") {
+					//说明已有数据，目前处于上拉加载
+					this.status = 'loading';
+					data["minId"] = this.last_id;
+					data["time"] = new Date().getTime() + '';
+					data["pageSize"] = 10;
+				}
+				uni.request({
+					url: 'https://unidemo.dcloud.net.cn/api/news',
+					data: data,
+					success: (data) => {
+						if (data.statusCode == 200) {
+							const result = data.data as UTSJSONObject
+							let list = this.setTime(result);
+							this.listData = this.reload ? list : this.listData.concat(list);
+							this.last_id = list[list.length - 1].id + "";
+							this.reload = false;
+							this.refresherTriggered = false
+						}
+					},
+					fail: (res) => {
+						console.log('fail', res);
+						this.refresherTriggered = false
+					}
+				});
+			},
+			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
+				});
+			},
+			setTime(items: UTSJSONObject): Item[] {
+				let newItems = [] as Item[];
+				if (items.isJSONArray()) {
+					const array = items.toJSONObject() as JSONArray;
+					for (let i = 0; i < array.size - 1; i++) {
+						const e = array.get(i) as JSONObject;
+						newItems.push({
+								author_name: e["author_name"] as string,
+								cover: e["cover"] as string,
+								id: e["id"] as number,
+								post_id: e["post_id"] as string,
+								published_at: e["published_at"] as string,
+								title: e["title"] as string
+							} as Item);
+					}
+				}
+				return newItems;
+			},
+			onRefresherrefresh() {
 				this.refresherTriggered = true
-				setTimeout(function () {
-					this.refresherTriggered = false
-				}, 1000)
+				this.reload = true;
+				this.last_id = '';
+				this.getBanner();
+				this.getList();
 			}
 		}
-	}
+	};
 </script>
 
 <style>
-	.uni-list-inner {
-		background-color: #eee;
+	.banner {
+		height: 360rpx;
+		overflow: hidden;
 		position: relative;
+		background-color: #ccc;
+	}
+
+	.banner-img {
 		width: 100%;
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		border-color: red;
 	}
 
-	.container {
+	.banner-title {
+		max-height: 84rpx;
+		overflow: hidden;
+		position: absolute;
+		left: 30rpx;
+		bottom: 30rpx;
+		width: 90%;
+		font-size: 32rpx;
+		font-weight: 400;
+		line-height: 42rpx;
+		color: white;
+		z-index: 11;
+	}
+
+	.uni-media-list {
+		padding: 22rpx 30rpx;
+		box-sizing: border-box;
 		display: flex;
-		flex-direction: column;
-		border: dashed;
-		height: 100%;
 		width: 100%;
+		flex-direction: row;
 	}
 
-	.list-item {
-		margin-left: 12px;
-		margin-right: 12px;
-		margin-top: 12px;
-		padding: 20px;
-		border-radius: 5px;
-		background-color: #fff;
+	.uni-media-list-logo {
+		width: 180rpx;
+		height: 140rpx;
 	}
 
-	.list-item-title {
-		font-size: 30px;
-		font-weight: bold;
-		color: #444;
-		width: 100%;
+	.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;
+		overflow: hidden;
+	}
+
+	.uni-media-list-text-bottom {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+	
+	.uni-media-list-text {
+		color: #9D9D9F;
+		font-size: 25rpx;
 	}
 </style>
\ No newline at end of file