Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
黄粱一梦--Y
hello uni-app x
提交
42004450
H
hello uni-app x
项目概览
黄粱一梦--Y
/
hello uni-app x
与 Fork 源项目一致
Fork自
DCloud / hello uni-app x
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
H
hello uni-app x
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
42004450
编写于
7月 04, 2023
作者:
taohebin@dcloud.io
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
修改list例子
上级
d251ece0
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
310 addition
and
50 deletion
+310
-50
common/uni.css
common/uni.css
+0
-1
pages.json
pages.json
+9
-0
pages/component/list/detail/detail.uvue
pages/component/list/detail/detail.uvue
+107
-0
pages/component/list/list.uvue
pages/component/list/list.uvue
+194
-49
未找到文件。
common/uni.css
浏览文件 @
42004450
...
...
@@ -44,7 +44,6 @@
position
:
relative
;
display
:
flex
;
flex-direction
:
column
;
padding-left
:
30
rpx
;
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录