Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 67df3c70 编写于 作者: W wanganxp
浏览文件
操作

完善演示例细节

上级 cfe1a2d5
隐藏空白更改
内联 并排
Showing with 278 addition and 234 deletion
pages/API/element-takesnapshot/element-takesnapshot.uvue
浏览文件 @ 67df3c70
...@@ -3,9 +3,7 @@ ...@@ -3,9 +3,7 @@
<page-head id="page-head" title="getElementById"></page-head> <page-head id="page-head" title="getElementById"></page-head>
<view class="uni-padding-wrap" id="snapshot-content"> <view class="uni-padding-wrap" id="snapshot-content">
<text id="text">this is text</text> <text id="text">this is text</text>
<view id="view" class="uni-common-mt" style="border: 1px solid red" <view id="view" class="uni-common-mt" style="border: 1px solid red">this is view</view>
>this is view</view
>
<button class="uni-btn" @click="changeViewStyle"> <button class="uni-btn" @click="changeViewStyle">
修改 view 宽高及背景色 修改 view 宽高及背景色
</button> </button>
...@@ -14,47 +12,78 @@ ...@@ -14,47 +12,78 @@
点击截图 点击截图
</button> </button>
</view> </view>
<image style="margin-top: 20px;" :src="snapImage" mode="aspectFit"></image> <image style="margin-top: 20px;" :src="snapImage" mode="aspectFit" @longpress="saveToAlbum"></image>
</view> </view>
</template> </template>
<script lang="uts"> <script lang="uts">
export default { export default {
data() { data() {
return { return {
snapImage:"/static/uni.png" snapImage: "/static/uni.png"
} }
}, },
methods: { methods: {
changeViewStyle(){ changeViewStyle() {
const text = uni.getElementById('text')! const text = uni.getElementById('text')!
text.style.setProperty('color', 'red') text.style.setProperty('color', 'red')
const view = uni.getElementById('view')! const view = uni.getElementById('view')!
view.style.setProperty('width', '90%') view.style.setProperty('width', '90%')
view.style.setProperty('height', '50px') view.style.setProperty('height', '50px')
view.style.setProperty('backgroundColor', '#007AFF') view.style.setProperty('backgroundColor', '#007AFF')
}, },
takeSnapshotClick(){ takeSnapshotClick() {
const view = uni.getElementById('snapshot-content')! const view = uni.getElementById('snapshot-content')!
view.takeSnapshot({ view.takeSnapshot({
success:function(res:TakeSnapshotSuccess){ success: function (res : TakeSnapshotSuccess) {
console.log(res.tempFilePath) console.log(res.tempFilePath)
this.snapImage = res.tempFilePath this.snapImage = res.tempFilePath
uni.showToast({ uni.showToast({
title:'截图成功' title: '截图成功，路径：' + res.tempFilePath,
}) icon: "none"
}, })
fail:function(res:TakeSnapshotFail){ },
console.log(res) fail: function (res : TakeSnapshotFail) {
uni.showToast({ console.log(res)
icon:'error', uni.showToast({
title:'截图失败' icon: 'error',
}) title: '截图失败'
} })
} as TakeSnapshotOptions) }
} as TakeSnapshotOptions)
},
saveToAlbum(e : TouchEvent) {
// console.log(e.currentTarget!.getAttribute("src"));
let filePath : string = e.currentTarget!.getAttribute("src") as string
uni.showActionSheet({
itemList: ["保存"],
success: res => {
// console.log(res.tapIndex);
if (res.tapIndex == 0) {
uni.saveImageToPhotosAlbum({
filePath: filePath,
success() {
uni.showToast({
position: "center",
icon: "none",
title: "图片保存成功，请到手机相册查看"
})
},
fail(e) {
uni.showModal({
content: "保存相册失败，errCode：" + e.errCode + "，errMsg：" + e.errMsg + "，errSubject：" + e.errSubject,
showCancel: false
});
}
})
}
},
fail: () => { },
complete: () => { }
});
}
} }
} }
}
</script> </script>
pages/component/sticky-header/sticky-header.uvue
浏览文件 @ 67df3c70
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<scroll-view style="background-color: #f5f5f5; flex-direction: row;" :scroll-x="true" :scroll-y="false" :show-scrollbar="false"> <scroll-view style="background-color: #f5f5f5; flex-direction: row;" :scroll-x="true" :scroll-y="false" :show-scrollbar="false">
<view class="flex-row" style="align-self: flex-start; flex-direction: row;"> <view class="flex-row" style="align-self: flex-start; flex-direction: row;">
<text ref="swipertab" class="sift-item" <text ref="swipertab" class="sift-item"
v-for="name in sift_item" @click=""> v-for="(name,index) in sift_item" @click="clickTH(index)">
{{name}} {{name}}
</text> </text>
</view> </view>
...@@ -57,7 +57,10 @@ ...@@ -57,7 +57,10 @@
}, },
confirm_scroll_top_input(value : number) { confirm_scroll_top_input(value : number) {
this.scroll_top_input = value this.scroll_top_input = value
} },
clickTH(index:number){
console.log("点击表头：" + index);
}
} }
} }
</script> </script>
......
pages/template/list-news/list-news.uvue
浏览文件 @ 67df3c70
<template> <template>
<view style="width: 100%;height: 100%;"> <list-view style="flex: 1;" refresher-enabled=true @refresherrefresh="onRefresherrefresh"
<view class="banner" @click="bannerClick(banner)"> :refresher-triggered="refresherTriggered">
<image class="banner-img" :src="banner.cover"></image> <list-item class="banner" @click="bannerClick(banner)">
<text class="banner-title">{{ banner.title }}</text> <image class="banner-img" :src="banner.cover"></image>
</view> <text class="banner-title">{{ banner.title }}</text>
<list-view class="uni-list-content" refresher-enabled=true @refresherrefresh="onRefresherrefresh" </list-item>
:refresher-triggered="refresherTriggered" scroll-y = true> <sticky-header>
<list-item v-for="(value, index) in listData" :key="index"> <view style="width: 100%;height:44px;background-color: #f5f5f5;flex-direction: row;justify-content:center;align-items:center;">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)"> <button style="height: 40px;font-size: 13px;" v-for="(name,index) in th_item" @click="clickTH(index)">
<view class="uni-media-list"> {{name}}
<image class="uni-media-list-logo" :src="value.cover"></image> </button>
<view class="uni-media-list-body"> </view>
<text class="uni-media-list-text-top">{{ value.title }}</text> </sticky-header>
<view class="uni-media-list-text-bottom"> <list-item v-for="(value, index) in listData" :key="index">
<text class="uni-media-list-text">{{ value.author_name }}</text> <view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
<text class="uni-media-list-text">{{ value.published_at }}</text> <view class="uni-media-list">
</view> <image class="uni-media-list-logo" :src="value.cover"></image>
</view> <view class="uni-media-list-body">
</view> <text class="uni-media-list-text-top">{{ value.title }}</text>
</view> <view class="uni-media-list-text-bottom">
</list-item> <text class="uni-media-list-text">{{ value.author_name }}</text>
</list-view> <text class="uni-media-list-text">{{ value.published_at }}</text>
</view> </view>
</view>
</view>
</view>
</list-item>
</list-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, th_item: ["排序", "筛选"],
banner: {} as Banner, refresherTriggered: false,
listData: [] as Item[], banner: {} as Banner,
last_id: '', listData: [] as Item[],
pageVisible: false last_id: '',
}; pageVisible: false
}, };
onLoad() { },
this.pageVisible = true; //设这个变量是为了避免联网结束后页面已经关闭，此时还继续执行回调逻辑的问题。不是必须的 onLoad() {
this.getBanner(); this.pageVisible = true; //设这个变量是为了避免联网结束后页面已经关闭，此时还继续执行回调逻辑的问题。不是必须的
this.getList(); this.getBanner();
}, this.getList();
onUnload() { },
this.pageVisible = false; onUnload() {
}, this.pageVisible = false;
methods: { },
getBanner() { methods: {
let data = { getBanner() {
column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名 let data = {
}; column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
uni.request<Banner>({ };
url: 'https://unidemo.dcloud.net.cn/api/banner/36kr', uni.request<Banner>({
data: data, url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
success: data => { data: data,
if(this.pageVisible){ success: data => {
this.refresherTriggered = false if (this.pageVisible) {
if (data.statusCode == 200) { this.refresherTriggered = false
if (data.statusCode == 200) {
const result = data.data const result = data.data
if(result != null){ if (result != null) {
this.banner = result; this.banner = result;
} }
} }
} }
}, },
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 = parseInt((this.last_id)) const minId = parseInt((this.last_id))
const time = new Date().getTime() + ''; const time = new Date().getTime() + '';
const pageSize = 10; const pageSize = 10;
url = url + "&minId=" + minId + "&time=" + time + "&pageSize=" + pageSize; url = url + "&minId=" + minId + "&time=" + time + "&pageSize=" + pageSize;
} */ } */
uni.request<Item[]>({ uni.request<Item[]>({
url: url, url: url,
method:"GET", method: "GET",
success: (res) => { success: (res) => {
if(this.pageVisible){ if (this.pageVisible) {
if (res.statusCode == 200) { if (res.statusCode == 200) {
console.log(res); console.log(res);
const result = res.data const result = res.data
if(result != null){ if (result != null) {
this.listData = result //因本接口没有更多分页数据，所以重新赋值。正常有分页的列表应该如下面push方式增加数组项 this.listData = result //因本接口没有更多分页数据，所以重新赋值。正常有分页的列表应该如下面push方式增加数组项
// this.listData.push(...result) // this.listData.push(...result)
// this.last_id = this.listData[0].id + ""; // this.last_id = this.listData[0].id + "";
} }
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/template/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;
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/template/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
}); });
}, },
onRefresherrefresh() { clickTH(index:number){
if(this.pageVisible){ uni.showModal({
this.refresherTriggered = true content: "点击表头项：" + index,
this.getBanner(); showCancel: false
this.getList(); });
} },
} onRefresherrefresh() {
} if (this.pageVisible) {
}; this.refresherTriggered = true
this.getBanner();
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;
display: flex; display: flex;
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>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或