2.触发触底事件时,要加载新的数据,然后渲染到页面上,不能简单得将新加载得数据复制到你定义在data得数据上,需要新旧数据得叠加
比如:(即是将上一次请求得数据叠加下一次请求得数据,那么当你向上拉时,还能有之前得数据)
this.album = […this.album,…result.res.album]
3.那么,肯定不是无限制得发送请求去请求数据,因为数据也是有限的,那么我们需要借助一个状态变量来判断是否具有新的数据,判断得依据有两个:
-
状态变量,如dataMore,设置初始值为true–自己自定义
-
判断请求中的数据result.res.vertical是否为空
-----result.res.album===0:说明没有数据了,则改变dataMore的状态为false,并且return;
-----result.res.album!=0时,那么说明还有数据,此时便可以进行数据叠加
具体实现如下:
在js中:
显示便签:
<scroll-view scroll-y @scrolltolower=“lower” class=“album_scroll_swiper”>
{{item.name}}
{{item.desc}}
+ 关注
结果:
举例
3.解决文字一行显示多出部分显示省略号,却撑开了盒子的问题
思路:给其父盒子加上
overflow:hidden;
文字一行显示的样式:
white-space:nowrap; 不换行
overflow:hidden; 截掉多出的部分
text-overflow:ellipsis; 显示省略号
4.实现A页面跳转到B页面时,传递参数给B页面
解析说明
1.在navigator标签中,指定url可以实现页面的跳转,在指定的url地址中,可以使用’?参数=XXX’的形式为指定地址的页面传递参数(这个参数一般作为一个标识符,比如我传递id,那么这个id一般用来再另一个页面中作为请求参数的id----${id},用来发送异步请求)
2.这里假设页面A使用navigator标签跳转到页面B,并向页面B传递参数id
3.那么再页面B中便可以在周期函数onLoad(options)中接受该参数
4.那么在页面B中根据id发送异步请求,根据请求得到的数据,然后动态渲染到页面上
比如请求地址这里就是要求指定id:
url: http://service.picasso.adesk.com/v1/wallpaper/album/${this.id}/wallpaper
)
结果演示:
打印输出
console.log(options)
后期处理后,页面最终效果
代码:
js部分:
template部分:
{{album.name}}
关注专辑
{{album.desc}}
总结:
得到由页面A传递过来的参数,
1.这里使用options.id获取
2.获取后,赋值给全局data下的id
3.然后便可以使用这个指定的id,调用request发送异步请求
4.发送异步请求,获取得到指定数据,然后进行渲染
(根据你点击A页面不同项,那么传过去B页面的id也不一样,因此获取到的数据也是特定的,即实现了两者之间的关联)
注意项
es6语法中,``一般都会于 结 合 使 用 , {}结合使用, 结合使用,{}包裹一变量
5.解决后台返回的数据时隐藏的json格式时
使用text标签
6.封装组件,多处使用
6.1需求分析:
6.1.1 实现功能
假设父组件为F(下图中的推荐页面中的图片,专辑详情页面),go-detail为组件页面A,imgdetail为组件页面B
go-detail组件主要实现以下功能
1.保存父组件F传过来的数据(list\index)
2.数据接收到将其保存到全局数据中(getApp().globalData)
3.实现跳转到页面B,页面B便可以获取到全局数据,然后整理数据之后,进行页面展示)
4.页面B时最终的展示效果,go-detail只是作为一个中间体,实现特定的功能)
上面两张图片都会跳转到图片详情页面,只不过需要一个实现一样功能的go-detail组件为中间体,在跳转至图片详情页面imgdetail
6.2封装组件的原因
-
实现一样的功能
-
多组件用到(月份和热门部分和专辑详情页面都有用到)
-
提高代码的复用性
6.3公共组件的设计
6.3.1 公共组件go-detail代码部分(A)
页面实现template部分
<navigator @click=“handleClick”>
说明:这里的solt插槽,用户父组件中放置图片,是的点击图片时实现跳转
js逻辑部分(这里主要是现实点击事件handleClick)
6.3.2 父组件的使用(F)
1.在专辑详情中使用
2. 在推荐页中的热门图片的使用
6.3 图片详情页面(B)
主要逻辑部分:
onLoad() {
const {
list,
index
} = getApp().globalData;
console.log(“由父组件传递过来的list\n”,list)
this.imgDetail = list[index];
console.log(“经过处理后的list–imgDetail\n”,this.imgDetail)
//moment函數接收的是毫秒,而傳過去的值为秒,因此需要*1000
// 将时间戳atime:1511308982----转换成-----xx年前的格式(配合moment.locale(“zh-cn”)使用)
this.imgDetail.cntime = moment(this.imgDetail.atime * 1000).fromNow();
//改变评论数据中的时间格式,并将其添加为cntime属性
this.hot.forEach(v => v.cntime = moment(v.user_atime * 1000).fromNow())
},
说明:
主要显示部分
图片详情页面(B)的使用步骤:
-
先获取go-detail存储的全局数据
-
对数据进行处理(因为父组件Fchuanguol的list时一个多个对象的数组,
-
根据索引我便可以获取到特定的数据
-
然后在页面显示的时传过来指定索引index数据对象数据
6.4总体结构
7.使用common.js处理时间格式
举例:
-
比如后台返回的数据时时间戳的形式,例如:atime:1511308982
-
那么我希望将其转换为我需要的如上图的格式(或者其他格式,可以查看相关的文档进行实现)
-
将时间戳----转换成-----xx年前的格式(配合moment.locale(“zh-cn”)使用,因为原始返回的时英文格式)
import moment from ‘moment’;
//设置语言为中文
moment.locale(“zh-cn”)
export default {
onLoad() {
const {
list,
index
} = getApp().globalData;
this.imgDetail.cntime = moment(this.imgDetail.atime * 1000).fromNow();
//改变评论数据中的时间格式,并将其添加为cntime属性
this.hot.forEach(v => v.cntime = moment(v.user_atime * 1000).fromNow())
},
结果:
8.在页面中,对于结构相同的模块,为其设置相同的类名class,使得样式的复用
8.1 举例
9.改变数组元素特定属性值,并以新的属性返回
需求:
我想循环改变hot数组中每个对象元素的时间格式,并且将改变的值以新属性ctime返回
10. 将图片和视频下载到本地
10.1 uni.downloadFile(OBJECT)相关说明
-
实质发送异步请求
-
返回的时一个Promise对象
10.2 下载图片
-
1.使用uni.downloadFile(),将远程文件下载到本地内存中(小程序会返回一个临时路径,这里使用const {tempFilePath} = result1[1];结构出临时路径,然后这个路径用于2.中的板寸到本地)
-
2.然后使用uni.saveImageToPhotosAlbum({}),将小程序内存中的临时文件下载到本地上,
-
实现逻辑代码
-
说明:我这里使用的时ES7的async await语法,也可以使用官方提供的方式,
上面的代码并没有对用户点击取消下载时做处理,下面进行如下优化:
- 页面
<view class=“down_button” @click=“handleDownload”>
下载图片
- 逻辑
//点击下载图片按钮,触发事件
async handleDownload() {
// uni.downloadFile({url:this.imgDetail.img}).then(result=>{})=====等价于async awiat
// 1.将远程文件下载到本地内存中(小程序会返回一个临时路径)
//触发下载图片的事件,然后弹出
uni.showLoading({
title: “下载中”
})
const result1 = await uni.downloadFile({
url: this.imgDetail.img
})
const {
tempFilePath
} = result1[1];
// console.log(tempFilePath)
//2.将小程序内存中的临时文件下载到本地上
uni.saveImageToPhotosAlbum({
filePath: tempFilePath,
success:()=>{
// console.log(‘下载成功’)
uni.hideLoading(
uni.showToast({
title: “下载成功”,
})
)
},
fail: () => {
// console.log(‘下载失败’)
uni.hideLoading(
uni.showToast({
title: “取消下载”,
})
)
}
})
}
- 结果:
-
当用户点击保存时,文件保存后关闭加载中的提示,并弹出下载成功的提示;
-
当用户点击取消时,关闭加载中的提示,同时弹出取消下载的提示
10.3 下载视频(同理与下载图片)
- 页面
<view class=“onload_button” @click=“onLoadToLocal”>
下载高清
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njg3MjEyMQ==,size_16,color_FFFFFF,t_70)
-
当用户点击保存时,文件保存后关闭加载中的提示,并弹出下载成功的提示;
-
当用户点击取消时,关闭加载中的提示,同时弹出取消下载的提示
10.3 下载视频(同理与下载图片)
- 页面
<view class=“onload_button” @click=“onLoadToLocal”>
下载高清
最后
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数初中级Android工程师,想要提升技能,往往是自己摸索成长,自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-4eosVY8e-1715244596605)]
[外链图片转存中…(img-YsioDce1-1715244596606)]
[外链图片转存中…(img-WzmxdJV4-1715244596606)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上Android开发知识点!不论你是刚入门Android开发的新手,还是希望在技术上不断提升的资深开发者,这些资料都将为你打开新的学习之门!
如果你觉得这些内容对你有帮助,需要这份全套学习资料的朋友可以戳我获取!!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!