Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6005
Star 91
Fork 164
H
hello uni-app x
提交 82062827 编写于 作者: W wanganxp
浏览文件
操作

微调

上级 3834c04f
隐藏空白更改
内联 并排
Showing with 401 addition and 439 deletion
pages.json
浏览文件 @ 82062827
...@@ -715,21 +715,21 @@ ...@@ -715,21 +715,21 @@
} }
}, },
{ {
"path": "pages/component/list-news/list", "path": "pages/template/list-news/list-news",
"style": { "style": {
"navigationBarTitleText": "列表到详情示例" "navigationBarTitleText": "列表到详情示例"
} }
}, },
{ {
"path": "pages/API/get-network-type/get-network-type", "path": "pages/template/list-news/detail/detail",
"style": { "style": {
"navigationBarTitleText": "" "navigationBarTitleText": "详情示例"
} }
}, },
{ {
"path": "pages/component/list-news/detail/detail", "path": "pages/API/get-network-type/get-network-type",
"style": { "style": {
"navigationBarTitleText": "详情示例" "navigationBarTitleText": ""
} }
}, },
{ {
......
pages/API/action-sheet/action-sheet.uvue
浏览文件 @ 82062827
<template> <template>
<view> <view>
<page-head :title="title"></page-head> <page-head :title="title"></page-head>
<view class="uni-list"> <view class="uni-list">
<radio-group @change="radioChange"> <radio-group @change="radioChange">
<radio class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value" <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" :class="index < items.length - 1 ? 'uni-list-cell-line': ''" :value="item.value" :checked="index === current">
:checked="index === current"> {{item.name}}
{{item.name}} </radio>
</radio> </radio-group>
</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> </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> </template>
<script lang="uts"> <script lang="uts">
type ItemType = { type ItemType = {
value : string, value : string,
name : string, name : string,
} }
export default { export default {
data() { data() {
return { return {
title: 'action-sheet', title: 'action-sheet',
itemColorCustom:false, itemColorCustom: false,
itemContentLarge:false, itemContentLarge: false,
itemNumLargeSelect:false, itemNumLargeSelect: false,
items: [{ items: [{
value: '标题', value: '标题',
name: '有标题' name: '有标题'
},
{
value: '',
name: '无标题'
},
{
value: '超长标题测试内容，测试超过显示最大范围之后的样式-超长标题测试内容，测试超过显示最大范围之后的样式',
name: '超长标题'
}
] as ItemType[],
current: 0,
// #ifdef H5
buttonRect: {},
// #endif
}
}, },
// #ifdef H5 {
onReady() { value: '',
this.getNodeInfo() name: '无标题'
window.addEventListener('resize', this.getNodeInfo)
}, },
beforeDestroy() { {
window.removeEventListener('resize', this.getNodeInfo) value: '超长标题测试内容，测试超过显示最大范围之后的样式-超长标题测试内容，测试超过显示最大范围之后的样式',
}, name: '超长标题'
// #endif }
methods: { ] as ItemType[],
radioChange(e : RadioGroupChangeEvent) { current: 0,
for (let i = 0; i < this.items.length; i++) { }
if (this.items[i].value === e.detail.value) { },
this.current = i; methods: {
break; radioChange(e : RadioGroupChangeEvent) {
} for (let i = 0; i < this.items.length; i++) {
} if (this.items[i].value === e.detail.value) {
}, this.current = i;
itemContentLargeChange: function (e : SwitchChangeEvent) { break;
this.itemContentLarge = e.detail.value }
}, }
itemColorChange: function (e : SwitchChangeEvent) { },
this.itemColorCustom = e.detail.value itemContentLargeChange: function (e : SwitchChangeEvent) {
}, this.itemContentLarge = e.detail.value
itemNumLargeChange: function (e : SwitchChangeEvent) { },
this.itemNumLargeSelect = e.detail.value itemColorChange: function (e : SwitchChangeEvent) {
}, this.itemColorCustom = e.detail.value
actionSheetTap() { },
itemNumLargeChange: function (e : SwitchChangeEvent) {
let itemInfo = ['item1', 'item2', 'item3', 'item4'] this.itemNumLargeSelect = e.detail.value
},
if(this.itemContentLarge){ actionSheetTap() {
itemInfo = ['两个黄鹂鸣翠柳，一行白鹭上青天。窗含西岭千秋雪，门泊东吴万里船', '水光潋滟晴方好,山色空蒙雨亦奇。 欲把西湖比西子,淡妆浓抹总相宜', '']
}else if(this.itemNumLargeSelect){ let itemInfo = ['item1', 'item2', 'item3', 'item4']
// 大量选项测试,不能超过6个元素 https://uniapp.dcloud.net.cn/api/ui/prompt.html#showactionsheet
itemInfo = [] if (this.itemContentLarge) {
for (var i = 1; i <= 10; i++) { itemInfo = ['两个黄鹂鸣翠柳，一行白鹭上青天。窗含西岭千秋雪，门泊东吴万里船', '水光潋滟晴方好,山色空蒙雨亦奇。 欲把西湖比西子,淡妆浓抹总相宜', '']
itemInfo.push('两个黄鹂鸣翠柳，一行白鹭上青天'); } else if (this.itemNumLargeSelect) {
} // 大量选项测试,不能超过6个元素 https://uniapp.dcloud.net.cn/api/ui/prompt.html#showactionsheet
} itemInfo = []
for (var i = 1; i <= 10; i++) {
const that = this itemInfo.push('两个黄鹂鸣翠柳，一行白鹭上青天');
if(this.itemColorCustom){ }
uni.showActionSheet({ }
title: this.items[this.current].value,
itemList: itemInfo, const that = this
itemColor:"#ff00ff", if (this.itemColorCustom) {
// #ifdef H5 uni.showActionSheet({
popover: { title: this.items[this.current].value,
// 104: navbar + topwindow 高度，暂时 fix createSelectorQuery 在 pc 上获取 top 不准确的 bug itemList: itemInfo,
top: that.buttonRect.top + 104 + that.buttonRect.height, itemColor: "#ff00ff",
left: that.buttonRect.left + that.buttonRect.width / 2 success: (e) => {
}, console.log(e.tapIndex);
// #endif uni.showToast({
success: (e) => { title: "点击了第" + e.tapIndex + "个选项",
console.log(e.tapIndex); icon: "none"
uni.showToast({ })
title: "点击了第" + e.tapIndex + "个选项", },
icon: "none" fail: (e) => {
}) console.log(e);
}, }
fail: (e) => { })
console.log(e); } else {
} uni.showActionSheet({
}) title: this.items[this.current].value,
}else{ itemList: itemInfo,
uni.showActionSheet({ success: (e) => {
title: this.items[this.current].value, console.log(e.tapIndex);
itemList: itemInfo, uni.showToast({
// #ifdef H5 title: "点击了第" + e.tapIndex + "个选项",
popover: { icon: "none"
// 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"
})
}
})
}
}, },
fail: (e) => {
// #ifdef H5 console.log(e);
getNodeInfo() { uni.showToast({
uni.createSelectorQuery().select('.target').boundingClientRect().exec((ret) => { title: e.errMsg,
const rect = ret[0] icon: "none"
if (rect) { })
this.buttonRect = rect
}
});
} }
// #endif })
} }
},
} }
</script> }
\ No newline at end of file </script>
pages/component/rich-text/rich-text-complex.uvue
浏览文件 @ 82062827
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<scroll-view> <scroll-view>
<!-- #endif --> <!-- #endif -->
<view> <view>
<page-head :title="title"></page-head> <page-head title="rich-text-complex"></page-head>
<view class="uni-padding-wrap uni-common-mt"> <view class="uni-padding-wrap uni-common-mt">
<rich-text :nodes="htmlString" @itemclick="itemClick"></rich-text> <rich-text :nodes="htmlString" @itemclick="itemClick"></rich-text>
</view> </view>
...@@ -17,21 +17,21 @@ ...@@ -17,21 +17,21 @@
export default { export default {
data() { data() {
return { 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>' 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: { methods: {
itemClick(e : RichTextItemClickEvent) { itemClick(e : RichTextItemClickEvent) {
console.log(JSON.stringify(e.detail)); console.log(JSON.stringify(e.detail));
let title = ''; let clicktext = '';
if (e.detail.src != null) { if (e.detail.src != null) {
title = '点击了图片，src = ' + e.detail.src; clicktext = '点击了图片，src = ' + e.detail.src;
} else if (e.detail.href != null) { } else if (e.detail.href != null) {
title = '点击了链接，href = ' + e.detail.href; clicktext = '点击了链接，href = ' + e.detail.href;
} }
uni.showModal({ uni.showModal({
title: title content:clicktext,
showCancel:false
}); });
} }
} }
......
pages/component/rich-text/rich-text-tags.uvue
浏览文件 @ 82062827
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view> <scroll-view>
<!-- #endif --> <!-- #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-padding-wrap uni-common-mt">
<view class="uni-title"> <view class="uni-title">
<text class="uni-title-text">支持的HTML标签</text> <text class="uni-title-text">支持的HTML标签</text>
...@@ -23,7 +23,6 @@ ...@@ -23,7 +23,6 @@
export default { export default {
data() { data() {
return { return {
title: 'rich-text-tags',
data: [ data: [
{ {
name: '<br/>', name: '<br/>',
...@@ -301,14 +300,15 @@ ...@@ -301,14 +300,15 @@
methods: { methods: {
itemClick(e : RichTextItemClickEvent) { itemClick(e : RichTextItemClickEvent) {
console.log(JSON.stringify(e.detail)); console.log(JSON.stringify(e.detail));
let title = ''; let clicktext = '';
if (e.detail.src != null) { if (e.detail.src != null) {
title = '点击了图片，src = ' + e.detail.src; clicktext = '点击了图片，src = ' + e.detail.src;
} else if (e.detail.href != null) { } else if (e.detail.href != null) {
title = '点击了链接，href = ' + e.detail.href; clicktext = '点击了链接，href = ' + e.detail.href;
} }
uni.showModal({ uni.showModal({
title: title content:clicktext,
showCancel:false
}); });
} }
} }
......
pages/tabBar/API.uvue
浏览文件 @ 82062827
...@@ -130,10 +130,9 @@ ...@@ -130,10 +130,9 @@
{ {
id: 'network', id: 'network',
name: '网络', name: '网络',
open: false,
pages: [ pages: [
{ {
name: '发起一个请求', name: '发起请求request',
url: 'request', url: 'request',
}, },
{ {
...@@ -158,10 +157,6 @@ ...@@ -158,10 +157,6 @@
url: 'websocket-global', url: 'websocket-global',
api: ["connectSocket", "onSocketOpen", "onSocketError", "sendSocketMessage", "onSocketMessage", "closeSocket", "onSocketClose"] api: ["connectSocket", "onSocketOpen", "onSocketError", "sendSocketMessage", "onSocketMessage", "closeSocket", "onSocketClose"]
}, },
{
name: '请求云函数',
url: 'call-function',
},
] as Page[], ] as Page[],
}, },
{ {
...@@ -348,7 +343,6 @@ ...@@ -348,7 +343,6 @@
{ {
id: 'location', id: 'location',
name: '位置', name: '位置',
open: false,
pages: [ pages: [
{ {
name: '获取当前位置', name: '获取当前位置',
...@@ -375,7 +369,6 @@ ...@@ -375,7 +369,6 @@
{ {
id: 'storage', id: 'storage',
name: '数据存储', name: '数据存储',
open: false,
pages: [ pages: [
{ {
name: 'storage（key-value存储）', name: 'storage（key-value存储）',
...@@ -383,6 +376,16 @@ ...@@ -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"] api: ["uni.getStorageInfo", "uni.getStorageInfoSync", "uni.getStorage", "uni.getStorageSync", "uni.setStorage", "uni.setStorageSync", "uni.removeStorage", "uni.removeStorageSync", "uni.clearStorage", "uni.clearStorageSync"]
}, },
] as Page[], ] as Page[],
},
{
id: 'unicloud',
name: 'uniCloud',
pages: [
{
name: '云函数',
url: 'call-function',
},
] as Page[],
}, },
/* { /* {
id: "rewarded-video-ad", id: "rewarded-video-ad",
...@@ -521,4 +524,4 @@ ...@@ -521,4 +524,4 @@
.item { .item {
margin-bottom: 12px; margin-bottom: 12px;
} }
</style> </style>
\ No newline at end of file
pages/tabBar/component.uvue
浏览文件 @ 82062827
...@@ -87,14 +87,6 @@ export default { ...@@ -87,14 +87,6 @@ export default {
enable: false enable: false
}, },
*/ */
{
name: 'list（新闻）',
url: '/pages/component/list-news/list',
},
// {
// name: 'list',
// url: '/pages/component/long-list/long-list',
// },
{ {
name: 'list-view', name: 'list-view',
}, },
......
pages/tabBar/template.uvue
浏览文件 @ 82062827
...@@ -87,6 +87,13 @@ export default { ...@@ -87,6 +87,13 @@ export default {
open: false, open: false,
enable: true, enable: true,
pages: [] as Page[], pages: [] as Page[],
},
{
id: 'list-news',
url: 'list-news',
name: '列表到详情',
open: false,
pages: [] as Page[],
}, },
{ {
id: 'scroll-fold-nav', id: 'scroll-fold-nav',
...@@ -100,17 +107,17 @@ export default { ...@@ -100,17 +107,17 @@ export default {
url: 'swiper-list', url: 'swiper-list',
name: 'swiper-list', name: 'swiper-list',
open: false, open: false,
enable: true, pages: [
pages: [] as Page[], {
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', id: 'custom-refresher',
url: 'custom-refresher', url: 'custom-refresher',
......
pages/component/list-news/detail/detail.uvue → pages/template/list-news/detail/detail.uvue
浏览文件 @ 82062827
<template> <template>
<!-- #ifdef APP --> <!-- #ifdef APP -->
<scroll-view style="flex: 1"> <scroll-view style="flex: 1">
<!-- #endif --> <!-- #endif -->
<view class="banner"> <view class="banner">
<image class="banner-img" :src="cover"></image> <image class="banner-img" :src="cover"></image>
<text class="banner-title">{{title}}</text> <text class="banner-title">{{title}}</text>
</view> </view>
<rich-text :nodes="htmlNodes" style="padding: 3px"></rich-text> <rich-text :nodes="htmlNodes" style="padding: 3px"></rich-text>
<!-- #ifdef APP --> <!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif --> <!-- #endif -->
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
htmlNodes: "", htmlNodes: "",
title: '', title: '',
cover: "", cover: "",
post_id: "", post_id: "",
} }
}, },
onLoad(event) { onLoad(event) {
// console.log(event); // console.log(event);
this.post_id = event["post_id"] ?? ""; this.post_id = event["post_id"] ?? "";
this.cover = event["cover"] ?? ""; this.cover = event["cover"] ?? "";
this.title = event["title"] ?? ""; this.title = event["title"] ?? "";
this.getDetail(); this.getDetail();
}, },
methods: { methods: {
getDetail() { getDetail() {
uni.request({ uni.request({
url: 'https://unidemo.dcloud.net.cn/api/news/36kr/' + this.post_id, url: 'https://unidemo.dcloud.net.cn/api/news/36kr/' + this.post_id,
success: (data) => { success: (data) => {
if (data.statusCode == 200) { if (data.statusCode == 200) {
const result = data.data as UTSJSONObject const result = data.data as UTSJSONObject
// console.log(result["content"]); // console.log(result["content"]);
this.htmlNodes = result["content"] as string; this.htmlNodes = result["content"] as string;
} }
}, },
fail: () => { fail: () => {
console.log('fail'); console.log('fail');
} }
}); });
}, },
} }
} }
</script> </script>
<style> <style>
.banner { .banner {
height: 360rpx; height: 360rpx;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background-color: #ccc; background-color: #ccc;
} }
.banner-img { .banner-img {
width: 100%; width: 100%;
} }
.banner-title { .banner-title {
max-height: 84rpx; max-height: 84rpx;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
left: 30rpx; left: 30rpx;
bottom: 30rpx; bottom: 30rpx;
width: 90%; width: 90%;
font-size: 32rpx; font-size: 32rpx;
font-weight: 400; font-weight: 400;
line-height: 42rpx; line-height: 42rpx;
color: white; color: white;
} }
.article-content { .article-content {
padding: 0 30rpx; padding: 0 30rpx;
overflow: hidden; overflow: hidden;
margin-bottom: 30rpx; margin-bottom: 30rpx;
} }
</style> </style>
pages/component/list-news/list.uvue → pages/template/list-news/list-news.uvue
浏览文件 @ 82062827
<template> <template>
<view style="width: 100%;height: 100%;"> <view style="width: 100%;height: 100%;">
<view class="banner" @click="bannerClick(banner)"> <view class="banner" @click="bannerClick(banner)">
<image class="banner-img" :src="banner.cover"></image> <image class="banner-img" :src="banner.cover"></image>
<text class="banner-title">{{ banner.title }}</text> <text class="banner-title">{{ banner.title }}</text>
</view> </view>
<list-view class="uni-list-content" refresher-enabled=true @refresherrefresh="onRefresherrefresh" <list-view class="uni-list-content" refresher-enabled=true @refresherrefresh="onRefresherrefresh"
:refresher-triggered="refresherTriggered" scroll-y = true> :refresher-triggered="refresherTriggered" scroll-y = true>
<list-item v-for="(value, index) in listData" :key="index"> <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-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>
<view class="uni-media-list-body"> <view class="uni-media-list-body">
<text class="uni-media-list-text-top">{{ value.title }}</text> <text class="uni-media-list-text-top">{{ value.title }}</text>
<view class="uni-media-list-text-bottom"> <view class="uni-media-list-text-bottom">
<text class="uni-media-list-text">{{ value.author_name }}</text> <text class="uni-media-list-text">{{ value.author_name }}</text>
<text class="uni-media-list-text">{{ value.published_at }}</text> <text class="uni-media-list-text">{{ value.published_at }}</text>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</list-item> </list-item>
</list-view> </list-view>
</view> </view>
</template> </template>
<script> <script>
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,
cover: string, cover: string,
id: number, id: number,
post_id: string, post_id: string,
published_at: string, published_at: string,
title: string title: string
} }
export default { export default {
data() { data() {
return { return {
refresherTriggered: false, refresherTriggered: false,
banner: {} as Banner, banner: {} as Banner,
listData: [] as Item[], listData: [] as Item[],
last_id: '', last_id: '',
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;
}, },
methods: { methods: {
getBanner() { getBanner() {
let data = { let data = {
column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名 column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
}; };
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) => {
console.log('fail', e); console.log('fail', e);
} }
}); });
}, },
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();
...@@ -91,12 +91,12 @@ ...@@ -91,12 +91,12 @@
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[]
if(result != null){ if(result != null){
...@@ -106,24 +106,24 @@ ...@@ -106,24 +106,24 @@
} }
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; const detail = e;
const post_id = detail.post_id; const post_id = detail.post_id;
const cover = detail.cover; const cover = detail.cover;
const title = detail.title; const title = detail.title;
uni.navigateTo({ 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
}); });
}, },
bannerClick(e:Banner){ bannerClick(e:Banner){
const detail = e; const detail = e;
...@@ -131,9 +131,9 @@ ...@@ -131,9 +131,9 @@
const cover = detail.cover; const cover = detail.cover;
const title = detail.title; const title = detail.title;
uni.navigateTo({ 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[] { setTime(items: UTSJSONObject[]): Item[] {
let newItems = [] as Item[]; let newItems = [] as Item[];
for(const item in items){ for(const item in items){
...@@ -147,63 +147,63 @@ ...@@ -147,63 +147,63 @@
title: e["title"] as string title: e["title"] as string
} as Item); } as Item);
} }
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();
} }
} }
} }
}; };
</script> </script>
<style> <style>
.banner { .banner {
height: 360rpx; height: 360rpx;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background-color: #ccc; background-color: #ccc;
} }
.banner-img { .banner-img {
width: 100%; width: 100%;
} }
.banner-title { .banner-title {
max-height: 84rpx; max-height: 84rpx;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
left: 30rpx; left: 30rpx;
bottom: 30rpx; bottom: 30rpx;
width: 90%; width: 90%;
font-size: 32rpx; font-size: 32rpx;
font-weight: 400; font-weight: 400;
line-height: 42rpx; line-height: 42rpx;
color: white; color: white;
} }
.uni-media-list { .uni-media-list {
padding: 22rpx 30rpx; padding: 22rpx 30rpx;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
width: 100%; width: 100%;
flex-direction: row; flex-direction: row;
} }
.uni-media-list-logo { .uni-media-list-logo {
width: 180rpx; width: 180rpx;
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-list-content{ .uni-list-content{
background-color: #FFFFFF; background-color: #FFFFFF;
position: relative; position: relative;
...@@ -211,23 +211,23 @@ ...@@ -211,23 +211,23 @@
flex-direction: column; flex-direction: column;
border-bottom: 1px solid #c8c7cc; border-bottom: 1px solid #c8c7cc;
flex: 1; flex: 1;
} }
.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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或