Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6005
Star 91
Fork 164
H
hello uni-app x
提交 e17775ca 编写于 作者: taohebin@dcloud.io's avatar taohebin@dcloud.io
浏览文件
操作

长列表示例

上级 5a3a7803
隐藏空白更改
内联 并排
Showing with 253 addition and 68 deletion
pages.json
浏览文件 @ e17775ca
...@@ -582,6 +582,24 @@ ...@@ -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": { "globalStyle": {
"pageOrientation": "portrait", "pageOrientation": "portrait",
......
pages/component/list/list.uvue
浏览文件 @ e17775ca
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
</view> </view>
<list class="uni-list" refresher-enabled=true @refresherrefresh="onRefresherrefresh" <list class="uni-list" refresher-enabled=true @refresherrefresh="onRefresherrefresh"
:refresher-triggered="refresherTriggered"> :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-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
<view class="uni-media-list"> <view class="uni-media-list">
<image class="uni-media-list-logo" :src="value.cover"></image> <image class="uni-media-list-logo" :src="value.cover"></image>
...@@ -19,20 +19,18 @@ ...@@ -19,20 +19,18 @@
</view> </view>
</view> </view>
</view> </view>
</cell> </cell>
<cell class="footer"></cell>
</list> </list>
</view> </view>
</template> </template>
<script> <script>
import JSONObject from 'com.alibaba.fastjson.JSONObject'; import JSONObject from 'com.alibaba.fastjson.JSONObject';
import JSONArray from 'com.alibaba.fastjson.JSONArray'; import JSONArray from 'com.alibaba.fastjson.JSONArray';
type Banner = { type Banner = {
cover: string | null, cover: string | null,
title: string | null, title: string | null,
post_id: string | null post_id: string | null
} }
type Item = { type Item = {
author_name: string, author_name: string,
...@@ -51,18 +49,13 @@ ...@@ -51,18 +49,13 @@
banner: {} as Banner, banner: {} as Banner,
listData: [] as Item[], listData: [] as Item[],
last_id: '', last_id: '',
contentText: {
contentdown: '上拉加载更多',
contentrefresh: '加载中',
contentnomore: '没有更多'
},
pageVisible: false pageVisible: false
}; };
}, },
onLoad() { onLoad() {
this.pageVisible = true; this.pageVisible = true;
this.getBanner(); this.getBanner();
this.getList(); this.getList();
}, },
onUnload() { onUnload() {
this.pageVisible = false; this.pageVisible = false;
...@@ -75,17 +68,17 @@ ...@@ -75,17 +68,17 @@
uni.request({ uni.request({
url: 'https://unidemo.dcloud.net.cn/api/banner/36kr', url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
data: data, data: data,
success: data => { success: data => {
if(this.pageVisible){ if(this.pageVisible){
this.refresherTriggered = false this.refresherTriggered = false
if (data.statusCode == 200) { if (data.statusCode == 200) {
let result = data.data as UTSJSONObject; let result = data.data as UTSJSONObject;
this.banner = { this.banner = {
cover: result["cover"] as string, cover: result["cover"] as string,
title: result["title"] as string, title: result["title"] as string,
post_id: result["post_id"] as string post_id: result["post_id"] as string
} as Banner; } as Banner;
} }
} }
}, },
fail: (e) => { fail: (e) => {
...@@ -94,61 +87,61 @@ ...@@ -94,61 +87,61 @@
}); });
}, },
getList() { getList() {
let url = "https://unidemo.dcloud.net.cn/api/news?column=id,post_id,title,author_name,cover,published_at"; let url = "https://unidemo.dcloud.net.cn/api/news?column=id,post_id,title,author_name,cover,published_at";
if (this.last_id != "") { if (this.last_id != "") {
const minId = (this.last_id).toInt(); const minId = (this.last_id).toInt();
const time = new Date().getTime() + ''; const time = new Date().getTime() + '';
const pageSize = 10; const pageSize = 10;
url = url + "&minId=" + minId + "&time=" + time + "&pageSize=" + pageSize; url = url + "&minId=" + minId + "&time=" + time + "&pageSize=" + pageSize;
} }
uni.request({ uni.request({
url: url, url: url,
method:"GET", method:"GET",
success: (data) => { success: (data) => {
if(this.pageVisible){ if(this.pageVisible){
if (data.statusCode == 200) { if (data.statusCode == 200) {
const result = data.data as UTSJSONObject const result = data.data as UTSJSONObject
let list = this.setTime(result); let list = this.setTime(result);
this.listData = list.concat(this.listData); this.listData = list.concat(this.listData);
console.log("after ",this.listData.size); this.last_id = listData[0].id + "";
this.last_id = listData[0].id + ""; this.refresherTriggered = false;
this.refresherTriggered = false; }
}
} }
}, },
fail: (res) => { fail: (res) => {
if(this.pageVisible){ if(this.pageVisible){
console.log('fail', res); console.log('fail', res);
this.refresherTriggered = false this.refresherTriggered = false
} }
} }
}); });
}, },
goDetail(e: Item) { goDetail(e: Item) {
const detail = e; console.log("eeee",e);
const post_id = detail.post_id; const detail = e;
const cover = detail.cover; const post_id = detail.post_id;
const title = detail.title; const cover = detail.cover;
uni.navigateTo({ const title = detail.title;
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({ uni.navigateTo({
url: 'pages/component/list/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title 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[] { setTime(items: UTSJSONObject): Item[] {
let newItems = [] as Item[]; let newItems = [] as Item[];
if (items.isJSONArray()) { if (items.isJSONArray()) {
const array = items.toJSONObject() as JSONArray; const array = items.toJSONObject() as JSONArray;
for (let i = array.size - 1; i >= 0; i--) { 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({ newItems.push({
author_name: e["author_name"] as string, author_name: e["author_name"] as string,
cover: e["cover"] as string, cover: e["cover"] as string,
...@@ -161,11 +154,11 @@ ...@@ -161,11 +154,11 @@
} }
return newItems; return newItems;
}, },
onRefresherrefresh() { onRefresherrefresh() {
if(this.pageVisible){ if(this.pageVisible){
this.refresherTriggered = true this.refresherTriggered = true
this.getBanner(); this.getBanner();
this.getList(); this.getList();
} }
} }
} }
...@@ -195,7 +188,6 @@ ...@@ -195,7 +188,6 @@
font-weight: 400; font-weight: 400;
line-height: 42rpx; line-height: 42rpx;
color: white; color: white;
/* z-index: 11; */
} }
.uni-media-list { .uni-media-list {
...@@ -211,27 +203,27 @@ ...@@ -211,27 +203,27 @@
height: 140rpx; height: 140rpx;
} }
.uni-media-list-body { .uni-media-list-body {
flex: 1; flex: 1;
padding-left: 15rpx; padding-left: 15rpx;
justify-content: space-around; justify-content: space-around;
} }
.uni-media-list-text-top { .uni-media-list-text-top {
/* height: 74rpx; */ /* height: 74rpx; */
font-size: 28rpx; font-size: 28rpx;
lines:2; lines:2;
overflow: hidden; overflow: hidden;
} }
.uni-media-list-text-bottom { .uni-media-list-text-bottom {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
} }
.uni-media-list-text { .uni-media-list-text {
color: #9D9D9F; color: #9D9D9F;
font-size: 25rpx; font-size: 25rpx;
} }
</style> </style>
\ No newline at end of file
pages/component/long-list/detail/detail.uvue 0 → 100644
浏览文件 @ e17775ca
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
pages/component/long-list/long-list.uvue 0 → 100644
浏览文件 @ e17775ca
<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
浏览文件 @ e17775ca
...@@ -69,8 +69,14 @@ ...@@ -69,8 +69,14 @@
enable: false enable: false
}, },
// #endif // #endif
{
name:'list（新闻）',
url:"pages/component/list/list",
enable:true
},
{ {
name:'list', name:'list',
url:"pages/component/long-list/long-list",
enable:true enable:true
} }
] as Page[] ] as Page[]
......
static/list-mock/mock.json 0 → 100644
浏览文件 @ e17775ca
[{
"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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或