Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5992
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 @@
<page-head id="page-head" title="getElementById"></page-head>
<view class="uni-padding-wrap" id="snapshot-content">
<text id="text">this is text</text>
<view id="view" class="uni-common-mt" style="border: 1px solid red"
>this is view</view
>
<view id="view" class="uni-common-mt" style="border: 1px solid red">this is view</view>
<button class="uni-btn" @click="changeViewStyle">
修改 view 宽高及背景色
</button>
......@@ -14,47 +12,78 @@
点击截图
</button>
</view>
<image style="margin-top: 20px;" :src="snapImage" mode="aspectFit"></image>
<image style="margin-top: 20px;" :src="snapImage" mode="aspectFit" @longpress="saveToAlbum"></image>
</view>
</template>
<script lang="uts">
export default {
data() {
return {
snapImage:"/static/uni.png"
}
},
methods: {
export default {
data() {
return {
snapImage: "/static/uni.png"
}
},
methods: {
changeViewStyle(){
const text = uni.getElementById('text')!
text.style.setProperty('color', 'red')
changeViewStyle() {
const text = uni.getElementById('text')!
text.style.setProperty('color', 'red')
const view = uni.getElementById('view')!
view.style.setProperty('width', '90%')
view.style.setProperty('height', '50px')
view.style.setProperty('backgroundColor', '#007AFF')
},
takeSnapshotClick(){
const view = uni.getElementById('snapshot-content')!
view.takeSnapshot({
success:function(res:TakeSnapshotSuccess){
console.log(res.tempFilePath)
this.snapImage = res.tempFilePath
uni.showToast({
title:'截图成功'
})
},
fail:function(res:TakeSnapshotFail){
console.log(res)
uni.showToast({
icon:'error',
title:'截图失败'
})
}
} as TakeSnapshotOptions)
const view = uni.getElementById('view')!
view.style.setProperty('width', '90%')
view.style.setProperty('height', '50px')
view.style.setProperty('backgroundColor', '#007AFF')
},
takeSnapshotClick() {
const view = uni.getElementById('snapshot-content')!
view.takeSnapshot({
success: function (res : TakeSnapshotSuccess) {
console.log(res.tempFilePath)
this.snapImage = res.tempFilePath
uni.showToast({
title: '截图成功，路径：' + res.tempFilePath,
icon: "none"
})
},
fail: function (res : TakeSnapshotFail) {
console.log(res)
uni.showToast({
icon: 'error',
title: '截图失败'
})
}
} 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>
pages/component/sticky-header/sticky-header.uvue
浏览文件 @ 67df3c70
......@@ -16,7 +16,7 @@
<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;">
<text ref="swipertab" class="sift-item"
v-for="name in sift_item" @click="">
v-for="(name,index) in sift_item" @click="clickTH(index)">
{{name}}
</text>
</view>
......@@ -57,7 +57,10 @@
},
confirm_scroll_top_input(value : number) {
this.scroll_top_input = value
}
},
clickTH(index:number){
console.log("点击表头：" + index);
}
}
}
</script>
......
pages/template/list-news/list-news.uvue
浏览文件 @ 67df3c70
<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>
</list-item>
</list-view>
</view>
<list-view style="flex: 1;" refresher-enabled=true @refresherrefresh="onRefresherrefresh"
:refresher-triggered="refresherTriggered">
<list-item class="banner" @click="bannerClick(banner)">
<image class="banner-img" :src="banner.cover"></image>
<text class="banner-title">{{ banner.title }}</text>
</list-item>
<sticky-header>
<view style="width: 100%;height:44px;background-color: #f5f5f5;flex-direction: row;justify-content:center;align-items:center;">
<button style="height: 40px;font-size: 13px;" v-for="(name,index) in th_item" @click="clickTH(index)">
{{name}}
</button>
</view>
</sticky-header>
<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>
</list-item>
</list-view>
</template>
<script>
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 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
}
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<Banner>({
url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
data: data,
success: data => {
if(this.pageVisible){
this.refresherTriggered = false
if (data.statusCode == 200) {
export default {
data() {
return {
th_item: ["排序", "筛选"],
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<Banner>({
url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
data: data,
success: data => {
if (this.pageVisible) {
this.refresherTriggered = false
if (data.statusCode == 200) {
const result = data.data
if(result != null){
if (result != null) {
this.banner = result;
}
}
}
},
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 = parseInt((this.last_id))
const time = new Date().getTime() + '';
const pageSize = 10;
url = url + "&minId=" + minId + "&time=" + time + "&pageSize=" + pageSize;
} */
}
}
},
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 = parseInt((this.last_id))
const time = new Date().getTime() + '';
const pageSize = 10;
url = url + "&minId=" + minId + "&time=" + time + "&pageSize=" + pageSize;
} */
uni.request<Item[]>({
url: url,
method:"GET",
success: (res) => {
if(this.pageVisible){
if (res.statusCode == 200) {
uni.request<Item[]>({
url: url,
method: "GET",
success: (res) => {
if (this.pageVisible) {
if (res.statusCode == 200) {
console.log(res);
const result = res.data
if(result != null){
this.listData = result //因本接口没有更多分页数据，所以重新赋值。正常有分页的列表应该如下面push方式增加数组项
// this.listData.push(...result)
// this.last_id = this.listData[0].id + "";
}
this.refresherTriggered = false;
}
}
},
fail: (res) => {
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/template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
});
},
bannerClick(e:Banner){
const detail = e;
const post_id = detail.post_id;
const cover = detail.cover;
const title = detail.title;
uni.navigateTo({
url: '/pages/template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
});
},
onRefresherrefresh() {
if(this.pageVisible){
this.refresherTriggered = true
this.getBanner();
this.getList();
}
}
}
};
const result = res.data
if (result != null) {
this.listData = result //因本接口没有更多分页数据，所以重新赋值。正常有分页的列表应该如下面push方式增加数组项
// this.listData.push(...result)
// this.last_id = this.listData[0].id + "";
}
this.refresherTriggered = false;
}
}
},
fail: (res) => {
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/template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
});
},
bannerClick(e : Banner) {
const detail = e;
const post_id = detail.post_id;
const cover = detail.cover;
const title = detail.title;
uni.navigateTo({
url: '/pages/template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
});
},
clickTH(index:number){
uni.showModal({
content: "点击表头项：" + index,
showCancel: false
});
},
onRefresherrefresh() {
if (this.pageVisible) {
this.refresherTriggered = true
this.getBanner();
this.getList();
}
}
}
};
</script>
<style>
.banner {
height: 360rpx;
overflow: hidden;
position: relative;
background-color: #ccc;
}
.banner {
height: 360rpx;
overflow: hidden;
position: relative;
background-color: #ccc;
}
.banner-img {
width: 100%;
}
.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;
}
.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 {
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-logo {
width: 180rpx;
height: 140rpx;
}
.uni-media-list-body {
flex: 1;
padding-left: 15rpx;
justify-content: space-around;
}
.uni-media-list-body {
flex: 1;
padding-left: 15rpx;
justify-content: space-around;
}
.uni-list-content{
background-color: #FFFFFF;
position: relative;
display: flex;
flex-direction: column;
border-bottom: 1px solid #c8c7cc;
flex: 1;
}
.uni-list-content {
background-color: #FFFFFF;
position: relative;
display: flex;
flex-direction: column;
border-bottom: 1px solid #c8c7cc;
flex: 1;
}
.uni-media-list-text-top {
/* height: 74rpx; */
font-size: 28rpx;
lines:2;
overflow: hidden;
}
.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-bottom {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.uni-media-list-text {
color: #9D9D9F;
font-size: 25rpx;
}
.uni-media-list-text {
color: #9D9D9F;
font-size: 25rpx;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或