Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 42004450 编写于 作者: taohebin@dcloud.io's avatar taohebin@dcloud.io
浏览文件
操作

修改list例子

上级 d251ece0
隐藏空白更改
内联 并排
Showing with 310 addition and 50 deletion
common/uni.css
浏览文件 @ 42004450
......@@ -44,7 +44,6 @@
position: relative;
display: flex;
flex-direction: column;
padding-left: 30rpx;
border-bottom: 1px solid #c8c7cc;
}
......
pages.json
浏览文件 @ 42004450
......@@ -554,6 +554,15 @@
}
}
,{
"path" : "pages/component/list/detail/detail",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"pageOrientation": "portrait",
......
pages/component/list/detail/detail.uvue 0 → 100644
浏览文件 @ 42004450
<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
浏览文件 @ 42004450
<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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或