提交 e17775ca 编写于 作者: taohebin@dcloud.io's avatar taohebin@dcloud.io

长列表示例

上级 5a3a7803
......@@ -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",
......
......@@ -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 {
......
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
<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
......@@ -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[]
......
[{
"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.
先完成此消息的编辑!
想要评论请 注册