Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Accustomed_
hello uni-app x
提交
82062827
H
hello uni-app x
项目概览
Accustomed_
/
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看板
提交
82062827
编写于
9月 05, 2023
作者:
W
wanganxp
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
微调
上级
3834c04f
变更
9
隐藏空白更改
内联
并排
Showing
9 changed file
with
401 addition
and
439 deletion
+401
-439
pages.json
pages.json
+5
-5
pages/API/action-sheet/action-sheet.uvue
pages/API/action-sheet/action-sheet.uvue
+123
-163
pages/component/rich-text/rich-text-complex.uvue
pages/component/rich-text/rich-text-complex.uvue
+6
-6
pages/component/rich-text/rich-text-tags.uvue
pages/component/rich-text/rich-text-tags.uvue
+6
-6
pages/tabBar/API.uvue
pages/tabBar/API.uvue
+12
-9
pages/tabBar/component.uvue
pages/tabBar/component.uvue
+0
-8
pages/tabBar/template.uvue
pages/tabBar/template.uvue
+17
-10
pages/template/list-news/detail/detail.uvue
pages/template/list-news/detail/detail.uvue
+78
-78
pages/template/list-news/list-news.uvue
pages/template/list-news/list-news.uvue
+154
-154
未找到文件。
pages.json
浏览文件 @
82062827
...
...
@@ -715,21 +715,21 @@
}
},
{
"path"
:
"pages/
component/list-news/list
"
,
"path"
:
"pages/
template/list-news/list-news
"
,
"style"
:
{
"navigationBarTitleText"
:
"列表到详情示例"
}
},
{
"path"
:
"pages/
API/get-network-type/get-network-type
"
,
"path"
:
"pages/
template/list-news/detail/detail
"
,
"style"
:
{
"navigationBarTitleText"
:
""
"navigationBarTitleText"
:
"
详情示例
"
}
},
{
"path"
:
"pages/
component/list-news/detail/detail
"
,
"path"
:
"pages/
API/get-network-type/get-network-type
"
,
"style"
:
{
"navigationBarTitleText"
:
"
详情示例
"
"navigationBarTitleText"
:
""
}
},
{
...
...
pages/API/action-sheet/action-sheet.uvue
浏览文件 @
82062827
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-list">
<radio-group @change="radioChange">
<radio class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"
:class="index < items.length - 1 ? 'uni-list-cell-line': ''" :value="item.value"
:checked="index === current">
{{item.name}}
</radio>
</radio-group>
</view>
<view class="uni-list">
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">自定义itemColor</view>
<switch :checked="itemColorCustom" @change="itemColorChange"/>
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">超长列表文本</view>
<switch :checked="itemContentLarge" @change="itemContentLargeChange"/>
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">大量选项</view>
<switch :checked="itemNumLargeSelect" @change="itemNumLargeChange"/>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button class="uni-btn-v" type="default" @tap="actionSheetTap">弹出action sheet</button>
</view>
</view>
<view>
<page-head :title="title"></page-head>
<view class="uni-list">
<radio-group @change="radioChange">
<radio class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"
:class="index < items.length - 1 ? 'uni-list-cell-line': ''" :value="item.value" :checked="index === current">
{{item.name}}
</radio>
</radio-group>
</view>
<view class="uni-list">
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">自定义itemColor</view>
<switch :checked="itemColorCustom" @change="itemColorChange" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">超长文本和空文本item</view>
<switch :checked="itemContentLarge" @change="itemContentLargeChange" />
</view>
<view class="uni-list-cell uni-list-cell-pd">
<view class="uni-list-cell-db">超过6个item</view>
<switch :checked="itemNumLargeSelect" @change="itemNumLargeChange" />
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-btn-v">
<button class="uni-btn-v" type="default" @tap="actionSheetTap">弹出action sheet</button>
</view>
</view>
</view>
</template>
<script lang="uts">
type ItemType = {
value : string,
name : string,
}
export default {
data() {
return {
title: 'action-sheet',
itemColorCustom:false,
itemContentLarge:false,
itemNumLargeSelect:false,
items: [{
value: '标题',
name: '有标题'
},
{
value: '',
name: '无标题'
},
{
value: '超长标题测试内容,测试超过显示最大范围之后的样式-超长标题测试内容,测试超过显示最大范围之后的样式',
name: '超长标题'
}
] as ItemType[],
current: 0,
// #ifdef H5
buttonRect: {},
// #endif
}
type ItemType = {
value : string,
name : string,
}
export default {
data() {
return {
title: 'action-sheet',
itemColorCustom: false,
itemContentLarge: false,
itemNumLargeSelect: false,
items: [{
value: '标题',
name: '有标题'
},
// #ifdef H5
onReady() {
this.getNodeInfo()
window.addEventListener('resize', this.getNodeInfo)
{
value: '',
name: '无标题'
},
beforeDestroy() {
window.removeEventListener('resize', this.getNodeInfo)
},
// #endif
methods: {
radioChange(e : RadioGroupChangeEvent) {
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].value === e.detail.value) {
this.current = i;
break;
}
}
},
itemContentLargeChange: function (e : SwitchChangeEvent) {
this.itemContentLarge = e.detail.value
},
itemColorChange: function (e : SwitchChangeEvent) {
this.itemColorCustom = e.detail.value
},
itemNumLargeChange: function (e : SwitchChangeEvent) {
this.itemNumLargeSelect = e.detail.value
},
actionSheetTap() {
let itemInfo = ['item1', 'item2', 'item3', 'item4']
if(this.itemContentLarge){
itemInfo = ['两个黄鹂鸣翠柳,一行白鹭上青天。窗含西岭千秋雪,门泊东吴万里船', '水光潋滟晴方好,山色空蒙雨亦奇。 欲把西湖比西子,淡妆浓抹总相宜', '']
}else if(this.itemNumLargeSelect){
// 大量选项测试,不能超过6个元素 https://uniapp.dcloud.net.cn/api/ui/prompt.html#showactionsheet
itemInfo = []
for (var i = 1; i <= 10; i++) {
itemInfo.push('两个黄鹂鸣翠柳,一行白鹭上青天');
}
}
const that = this
if(this.itemColorCustom){
uni.showActionSheet({
title: this.items[this.current].value,
itemList: itemInfo,
itemColor:"#ff00ff",
// #ifdef H5
popover: {
// 104: navbar + topwindow 高度,暂时 fix createSelectorQuery 在 pc 上获取 top 不准确的 bug
top: that.buttonRect.top + 104 + that.buttonRect.height,
left: that.buttonRect.left + that.buttonRect.width / 2
},
// #endif
success: (e) => {
console.log(e.tapIndex);
uni.showToast({
title: "点击了第" + e.tapIndex + "个选项",
icon: "none"
})
},
fail: (e) => {
console.log(e);
}
})
}else{
uni.showActionSheet({
title: this.items[this.current].value,
itemList: itemInfo,
// #ifdef H5
popover: {
// 104: navbar + topwindow 高度,暂时 fix createSelectorQuery 在 pc 上获取 top 不准确的 bug
top: that.buttonRect.top + 104 + that.buttonRect.height,
left: that.buttonRect.left + that.buttonRect.width / 2
},
// #endif
success: (e) => {
console.log(e.tapIndex);
uni.showToast({
title: "点击了第" + e.tapIndex + "个选项",
icon: "none"
})
},
fail: (e) => {
console.log(e);
uni.showToast({
title: e.errMsg,
icon: "none"
})
}
})
}
{
value: '超长标题测试内容,测试超过显示最大范围之后的样式-超长标题测试内容,测试超过显示最大范围之后的样式',
name: '超长标题'
}
] as ItemType[],
current: 0,
}
},
methods: {
radioChange(e : RadioGroupChangeEvent) {
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].value === e.detail.value) {
this.current = i;
break;
}
}
},
itemContentLargeChange: function (e : SwitchChangeEvent) {
this.itemContentLarge = e.detail.value
},
itemColorChange: function (e : SwitchChangeEvent) {
this.itemColorCustom = e.detail.value
},
itemNumLargeChange: function (e : SwitchChangeEvent) {
this.itemNumLargeSelect = e.detail.value
},
actionSheetTap() {
let itemInfo = ['item1', 'item2', 'item3', 'item4']
if (this.itemContentLarge) {
itemInfo = ['两个黄鹂鸣翠柳,一行白鹭上青天。窗含西岭千秋雪,门泊东吴万里船', '水光潋滟晴方好,山色空蒙雨亦奇。 欲把西湖比西子,淡妆浓抹总相宜', '']
} else if (this.itemNumLargeSelect) {
// 大量选项测试,不能超过6个元素 https://uniapp.dcloud.net.cn/api/ui/prompt.html#showactionsheet
itemInfo = []
for (var i = 1; i <= 10; i++) {
itemInfo.push('两个黄鹂鸣翠柳,一行白鹭上青天');
}
}
const that = this
if (this.itemColorCustom) {
uni.showActionSheet({
title: this.items[this.current].value,
itemList: itemInfo,
itemColor: "#ff00ff",
success: (e) => {
console.log(e.tapIndex);
uni.showToast({
title: "点击了第" + e.tapIndex + "个选项",
icon: "none"
})
},
fail: (e) => {
console.log(e);
}
})
} else {
uni.showActionSheet({
title: this.items[this.current].value,
itemList: itemInfo,
success: (e) => {
console.log(e.tapIndex);
uni.showToast({
title: "点击了第" + e.tapIndex + "个选项",
icon: "none"
})
},
// #ifdef H5
getNodeInfo() {
uni.createSelectorQuery().select('.target').boundingClientRect().exec((ret) => {
const rect = ret[0]
if (rect) {
this.buttonRect = rect
}
});
fail: (e) => {
console.log(e);
uni.showToast({
title: e.errMsg,
icon: "none"
})
}
// #endif
})
}
},
}
</script>
\ No newline at end of file
}
</script>
pages/component/rich-text/rich-text-complex.uvue
浏览文件 @
82062827
...
...
@@ -3,7 +3,7 @@
<scroll-view>
<!-- #endif -->
<view>
<page-head
:title="title
"></page-head>
<page-head
title="rich-text-complex
"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<rich-text :nodes="htmlString" @itemclick="itemClick"></rich-text>
</view>
...
...
@@ -17,21 +17,21 @@
export default {
data() {
return {
title: 'rich-text-complex',
htmlString: '<p><a href="https://www.dcloud.io/hbuilderx.html">HBuilderX</a><br/><img src="https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"></img><h1>HBuilderX,轻巧、极速,极客编辑器</h1><p style="color:red;"><small>HBuilderX,轻巧、极速,极客编辑器 </small><big>HBuilderX,轻巧、极速,极客编辑器</big><strong>HBuilderX,轻巧、极速,极客编辑器</strong><i>HBuilderX,轻巧、极速,极客编辑器 </i><u>HBuilderX,轻巧、极速,极客编辑器</u><del>HBuilderX,轻巧、极速,极客编辑器</del></p><h2>uni-app x,终极跨平台方案</h2>、<p style="background-color: yellow;"><small>uni-app x,终极跨平台方案 </small><big>uni-app x,终极跨平台方案</big><strong>uni-appx,终极跨平台方案 </strong><i>uni-app x,终极跨平台方案 </i><u>uni-app x,终极跨平台方案 </u><del>uni-appx,终极跨平台方案</del></p><h3>uniCloud,js serverless云服务</h3><p style="text-decoration: line-through;"><small>uniCloud,js serverless云服务 </small><big>uniCloud,jsserverless云服务</big><strong>uniCloud,js serverless云服务 </strong><i>uniCloud,js serverless云服务 </i><u>uniCloud,jsserverless云服务</u><del>uniCloud,js serverless云服务</del></p><h4>uts,大一统语言</h4><p style="text-align: center;"><small>uts,大一统语言 </small><big>uts,大一统语言 </big><strong>uts,大一统语言</strong><i>uts,大一统语言</i><u>uts,大一统语言 </u><del>uts,大一统语言</del></p><h5>uniMPSdk,让你的App具备小程序能力</h5><h6>uni-admin,开源、现成的全端管理后台</h6><ul><li style="color: red; text-align: left;">uni-app x,终极跨平台方案</li><li style="color: green; text-align: center;">uni-app x,终极跨平台方案</li><li style="color: blue; text-align: right;">uni-app x,终极跨平台方案</li></ul><a href="https://uniapp.dcloud.net.cn">uni-app</a><br/><img src="https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png"></img></p>'
}
},
methods: {
itemClick(e : RichTextItemClickEvent) {
console.log(JSON.stringify(e.detail));
let
title
= '';
let
clicktext
= '';
if (e.detail.src != null) {
title
= '点击了图片,src = ' + e.detail.src;
clicktext
= '点击了图片,src = ' + e.detail.src;
} else if (e.detail.href != null) {
title
= '点击了链接,href = ' + e.detail.href;
clicktext
= '点击了链接,href = ' + e.detail.href;
}
uni.showModal({
title: title
content:clicktext,
showCancel:false
});
}
}
...
...
pages/component/rich-text/rich-text-tags.uvue
浏览文件 @
82062827
...
...
@@ -2,7 +2,7 @@
<!-- #ifdef APP -->
<scroll-view>
<!-- #endif -->
<page-head
:title="title
"></page-head>
<page-head
title="rich-text-tags
"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
<text class="uni-title-text">支持的HTML标签</text>
...
...
@@ -23,7 +23,6 @@
export default {
data() {
return {
title: 'rich-text-tags',
data: [
{
name: '<br/>',
...
...
@@ -301,14 +300,15 @@
methods: {
itemClick(e : RichTextItemClickEvent) {
console.log(JSON.stringify(e.detail));
let
title
= '';
let
clicktext
= '';
if (e.detail.src != null) {
title
= '点击了图片,src = ' + e.detail.src;
clicktext
= '点击了图片,src = ' + e.detail.src;
} else if (e.detail.href != null) {
title
= '点击了链接,href = ' + e.detail.href;
clicktext
= '点击了链接,href = ' + e.detail.href;
}
uni.showModal({
title: title
content:clicktext,
showCancel:false
});
}
}
...
...
pages/tabBar/API.uvue
浏览文件 @
82062827
...
...
@@ -130,10 +130,9 @@
{
id: 'network',
name: '网络',
open: false,
pages: [
{
name: '发起
一个请求
',
name: '发起
请求request
',
url: 'request',
},
{
...
...
@@ -158,10 +157,6 @@
url: 'websocket-global',
api: ["connectSocket", "onSocketOpen", "onSocketError", "sendSocketMessage", "onSocketMessage", "closeSocket", "onSocketClose"]
},
{
name: '请求云函数',
url: 'call-function',
},
] as Page[],
},
{
...
...
@@ -348,7 +343,6 @@
{
id: 'location',
name: '位置',
open: false,
pages: [
{
name: '获取当前位置',
...
...
@@ -375,7 +369,6 @@
{
id: 'storage',
name: '数据存储',
open: false,
pages: [
{
name: 'storage(key-value存储)',
...
...
@@ -383,6 +376,16 @@
api: ["uni.getStorageInfo", "uni.getStorageInfoSync", "uni.getStorage", "uni.getStorageSync", "uni.setStorage", "uni.setStorageSync", "uni.removeStorage", "uni.removeStorageSync", "uni.clearStorage", "uni.clearStorageSync"]
},
] as Page[],
},
{
id: 'unicloud',
name: 'uniCloud',
pages: [
{
name: '云函数',
url: 'call-function',
},
] as Page[],
},
/* {
id: "rewarded-video-ad",
...
...
@@ -521,4 +524,4 @@
.item {
margin-bottom: 12px;
}
</style>
\ No newline at end of file
</style>
pages/tabBar/component.uvue
浏览文件 @
82062827
...
...
@@ -87,14 +87,6 @@ export default {
enable: false
},
*/
{
name: 'list(新闻)',
url: '/pages/component/list-news/list',
},
// {
// name: 'list',
// url: '/pages/component/long-list/long-list',
// },
{
name: 'list-view',
},
...
...
pages/tabBar/template.uvue
浏览文件 @
82062827
...
...
@@ -87,6 +87,13 @@ export default {
open: false,
enable: true,
pages: [] as Page[],
},
{
id: 'list-news',
url: 'list-news',
name: '列表到详情',
open: false,
pages: [] as Page[],
},
{
id: 'scroll-fold-nav',
...
...
@@ -100,17 +107,17 @@ export default {
url: 'swiper-list',
name: 'swiper-list',
open: false,
enable: true,
pages: [] as Page[],
pages: [
{
name: '下划线样式',
url:'swiper-list'
},
{
name: '字体放大样式',
url:'swiper-list2'
},
] as Page[],
},
{
id: 'swiper-list2',
url: 'swiper-list2',
name: 'swiper-list2',
open: false,
enable: true,
pages: [] as Page[],
},
{
id: 'custom-refresher',
url: 'custom-refresher',
...
...
pages/
component
/list-news/detail/detail.uvue
→
pages/
template
/list-news/detail/detail.uvue
浏览文件 @
82062827
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="banner">
<image class="banner-img" :src="cover"></image>
<text class="banner-title">{{title}}</text>
</view>
<rich-text :nodes="htmlNodes" style="padding: 3px"></rich-text>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
export default {
data() {
return {
htmlNodes: "",
title: '',
cover: "",
post_id: "",
}
},
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="banner">
<image class="banner-img" :src="cover"></image>
<text class="banner-title">{{title}}</text>
</view>
<rich-text :nodes="htmlNodes" style="padding: 3px"></rich-text>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
export default {
data() {
return {
htmlNodes: "",
title: '',
cover: "",
post_id: "",
}
},
onLoad(event) {
// console.log(event);
this.post_id = event["post_id"] ?? "";
this.cover = event["cover"] ?? "";
this.title = event["title"] ?? "";
this.getDetail();
},
methods: {
getDetail() {
uni.request({
url: 'https://unidemo.dcloud.net.cn/api/news/36kr/' + this.post_id,
success: (data) => {
if (data.statusCode == 200) {
// console.log(event);
this.post_id = event["post_id"] ?? "";
this.cover = event["cover"] ?? "";
this.title = event["title"] ?? "";
this.getDetail();
},
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
// console.log(result["content"]);
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;
}
.article-content {
padding: 0 30rpx;
overflow: hidden;
margin-bottom: 30rpx;
}
// console.log(result["content"]);
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;
}
.article-content {
padding: 0 30rpx;
overflow: hidden;
margin-bottom: 30rpx;
}
</style>
pages/
component/list-news/list
.uvue
→
pages/
template/list-news/list-news
.uvue
浏览文件 @
82062827
<template>
<view style="width: 100%;height: 100%;">
<view class="banner" @click="bannerClick(banner)">
<image class="banner-img" :src="banner.cover"></image>
<text class="banner-title">{{ banner.title }}</text>
</view>
<list-view class="uni-list-content" refresher-enabled=true @refresherrefresh="onRefresherrefresh"
:refresher-triggered="refresherTriggered" scroll-y = true>
<template>
<view style="width: 100%;height: 100%;">
<view class="banner" @click="bannerClick(banner)">
<image class="banner-img" :src="banner.cover"></image>
<text class="banner-title">{{ banner.title }}</text>
</view>
<list-view class="uni-list-content" refresher-enabled=true @refresherrefresh="onRefresherrefresh"
:refresher-triggered="refresherTriggered" scroll-y = true>
<list-item 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>
<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>
</list-item>
</list-view>
</view>
</template>
</list-view>
</view>
</template>
<script>
type Banner = {
cover: string | null,
type Banner = {
cover: string | null,
title: string | null,
post_id: string | null
}
type Item = {
author_name: string,
cover: string,
id: number,
post_id: string,
published_at: string,
title: string
}
}
type Item = {
author_name: string,
cover: string,
id: number,
post_id: string,
published_at: string,
title: string
}
export default {
data() {
return {
refresherTriggered: false,
banner: {} as Banner,
listData: [] as Item[],
last_id: '',
pageVisible: false
};
},
onLoad() {
this.pageVisible = true;
this.getBanner();
export default {
data() {
return {
refresherTriggered: false,
banner: {} as Banner,
listData: [] as Item[],
last_id: '',
pageVisible: false
};
},
onLoad() {
this.pageVisible = true;
this.getBanner();
this.getList();
},
onUnload() {
this.pageVisible = false;
},
methods: {
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,
},
onUnload() {
this.pageVisible = false;
},
methods: {
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 => {
if(this.pageVisible){
this.refresherTriggered = false
if (data.statusCode == 200) {
this.refresherTriggered = false
if (data.statusCode == 200) {
let result = data.data as UTSJSONObject;
this.banner = {
cover: result["cover"] as string,
this.banner = {
cover: result["cover"] as string,
title: result["title"] as string,
post_id: result["post_id"] as string
} as Banner;
post_id: result["post_id"] as string
} as Banner;
}
}
},
fail: (e) => {
console.log('fail', e);
}
});
},
getList() {
}
},
fail: (e) => {
console.log('fail', e);
}
});
},
getList() {
let url = "https://unidemo.dcloud.net.cn/api/news?column=id,post_id,title,author_name,cover,published_at";
if (this.last_id != "") {
const minId = (this.last_id).toInt();
...
...
@@ -91,12 +91,12 @@
const pageSize = 10;
url = url + "&minId=" + minId + "&time=" + time + "&pageSize=" + pageSize;
}
uni.request({
url: url,
method:"GET",
uni.request({
url: url,
method:"GET",
success: (data) => {
if(this.pageVisible){
if(this.pageVisible){
if (data.statusCode == 200) {
const result = data.data as UTSJSONObject[]
if(result != null){
...
...
@@ -106,24 +106,24 @@
}
this.refresherTriggered = false;
}
}
},
}
},
fail: (res) => {
if(this.pageVisible){
if(this.pageVisible){
console.log('fail', res);
this.refresherTriggered = false
}
}
});
},
}
}
});
},
goDetail(e: Item) {
const detail = e;
const post_id = detail.post_id;
const cover = detail.cover;
const title = detail.title;
uni.navigateTo({
url: '/pages/
component/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
});
uni.navigateTo({
url: '/pages/
template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
});
},
bannerClick(e:Banner){
const detail = e;
...
...
@@ -131,9 +131,9 @@
const cover = detail.cover;
const title = detail.title;
uni.navigateTo({
url: '/pages/
component
/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
url: '/pages/
template
/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
});
},
},
setTime(items: UTSJSONObject[]): Item[] {
let newItems = [] as Item[];
for(const item in items){
...
...
@@ -147,63 +147,63 @@
title: e["title"] as string
} as Item);
}
return newItems;
},
return newItems;
},
onRefresherrefresh() {
if(this.pageVisible){
this.refresherTriggered = true
this.getBanner();
this.refresherTriggered = true
this.getBanner();
this.getList();
}
}
}
};
</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;
}
.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;
}
}
}
};
</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;
}
.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;
justify-content: space-around;
padding-left: 15rpx;
justify-content: space-around;
}
.uni-list-content{
background-color: #FFFFFF;
position: relative;
...
...
@@ -211,23 +211,23 @@
flex-direction: column;
border-bottom: 1px solid #c8c7cc;
flex: 1;
}
.uni-media-list-text-top {
/* height: 74rpx; */
}
.uni-media-list-text-top {
/* height: 74rpx; */
font-size: 28rpx;
lines:2;
overflow: hidden;
}
.uni-media-list-text-bottom {
display: flex;
overflow: hidden;
}
.uni-media-list-text-bottom {
display: flex;
flex-direction: row;
justify-content: space-between;
justify-content: space-between;
}
.uni-media-list-text {
color: #9D9D9F;
font-size: 25rpx;
}
</style>
\ No newline at end of file
}
</style>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录