功能介绍
在组件中能用生命周期组件没有太多,使用mouted(){}
接口调用(新)
url:"http://service.picasso.adesk.com/v3/homepage/vertical",
data:{
limit:30,
order:"hot",
skip:0
}
接口调用结果
home-recommend/index.vue
结果
home-recommend/index.vue
mode=“widthFix” 图片高度自适应 》》 知识点隶属于微信小程序基础
css 中的 flex 布局需要掌握,排版一般都会用到
结果
省略了上方四张图片的相关代码
home-recommend/index.vue
18 /
01 月
你负责美丽就好
更多 >
效果
选中代码块 快捷键ctrl+shift+p
显示插件提示框,选择generate css tress即可
快捷键 ctrl + D 选中view 删除所有的view
src/uni.scss
$color:#d52a7e;
npm install moment
http://momentjs.cn/
月份格式输出
<template>
<view>
<view class="moneths_wrap">
<view class="moneths_title">
<view class="moneths_title_info">
<view class="moneths_info">
<text>{{monthes.DD}} /text>
{{monthes.MM}} 月
view>
<view class="moneths_text">{{monthes.title}}view>
view>
<view class="moneths_title_more">更多 > view>
view>
<view class="moneths_content">view>
view>
view>
template>
<script>
//导入 moment.js
import moment from "moment";
export default {
data() {
return {
//推荐列表
recommends: [],
//月份 对象
monthes: {}
};
},
mounted() {
this.request({
url: "http://service.picasso.adesk.com/v3/homepage/vertical",
data: {
limit: 30,
order: "hot",
skip: 0
},
}).then((result) => {
console.log(result);
//推荐模块
this.recommends = result.res.homepage[1].items;
//月份模块
this.monthes = result.res.homepage[2];
//将时间戳 改成 18号/月 moment.js
this.monthes.MM = moment(this.monthes.stime).format("MM");
this.monthes.DD = moment(this.monthes.stime).format("DD");
console.log(this.monthes);
});
},
};
</script>
大图变缩略图
图片渲染
image标签中的mode
aspectFit 等比例拉伸
aspectFill 填满
优化月份模块
问题
当请求未返回时显示undefined,优化便是解决这个问题
做判断
快捷键 替换代码
ctrl + h
response数据格式:
代码:
home-recommend/index.vue
<template>
<view v-if="recommends.length > 0">
<view class="hots_wrap">
<view class="hots_title">
<text>热门text>
view>
<view class="hots_content">
<view class="hot_item" v-for="item in hots" :key="item.id">
<image mode="widthFix" :src="item.thumb">image>
view>
view>
view>
view>
template>
<script>
import moment from "moment";
export default {
data() {
return {
// 热门
hots: [],
};
},
mounted() {
this.request({
url: "http://service.picasso.adesk.com/v3/homepage/vertical",
data: {
limit: 30,
order: "hot",
skip: 0,
},
}).then((result) => {
//获取热门数据的列表
this.hots = result.res.vertical;
});
},
};
</script>
目前效果:
目标效果:
需要实现头部固定变不变
思路:
给容器定个高度,应该是整个屏幕的高➖头部的高,底部的bar不用管,因为小程序把底部剔除出来了
过程:
scroll-view
,加入scroll-y
表示上下滑动注意 - 号左右有空格键
100vh 代表整个屏幕的高度,此处忽略底部bar
skip : 跳过多少条
提取出来 ,方便改动
data() {
return {
//推荐列表
recommends: [],
//月份 对象
monthes: {},
// 热门
hots: [],
//请求的参数
params: {
limit: 30,
order: "hot",
skip: 0,
},
//是否还有下一页
hasMore: true,
};
}
底部触发函数 handleToLower
@scrolltolower="handleToLower"
hasMore:表示是否还有数据
getList():封装了请求
handleToLower() {
/**
* 1 修改参数 skip += limit
* 2 重新发送请求 getList()
* 3 请求回来成功 hots 数据的叠加
*/
if (this.hasMore) {
this.params.skip += this.params.limit;
this.getList();
} else {
//弹窗提示用户
uni.showToast({
title: "已经没图片啦",
duration: 2000,
});
}
},
getList()
获得接口的数据
经过调试,发现视频中 length的方法并不能判断是否有图片数据
通过数据观察,发现当没有数据的时候,接口中code的返回值为1,有数据的时候,接口的code的返回值为0
拼接热门数据(es6):this.hots = […this.hots, …result.res.vertical];
//获取接口的数据
getList() {
this.request({
url: "http://service.picasso.adesk.com/v3/homepage/vertical",
data: this.params,
}).then((result) => {
console.log(result);
//判断还有没有下一页数据
if (result.code === 1) {
this.hasMore = false;
return;
}
//第一次发请求的时候
if (this.recommends.length === 0) {
//推荐模块
this.recommends = result.res.homepage[1].items;
//月份模块
this.monthes = result.res.homepage[2];
//将时间戳 改成 18号/月 moment.js
this.monthes.MM = moment(this.monthes.stime).format("MM");
this.monthes.DD = moment(this.monthes.stime).format("DD");
console.log(this.monthes);
}
//获取热门数据的列表
//改成数组拼接的方式 es6
this.hots = [...this.hots, ...result.res.vertical];
});
}
setNavigationBarTitle
在组件中动态修改主题
动态修改页面标题
home-album/index.vue
mounted() {
//修改页面标题
uni.setNavigationBarTitle({title:"专辑"});
}
专辑接口:
http://service.picasso.adesk.com/v1/wallpaper/album
<template>
<view>
<view class="album_swiper">
<swiper
autoplay
indicator-dots
circular
>
<swiper-item
v-for="item in banner"
:key="item.id"
>
<image :src="item.thumb">image>
swiper-item>
swiper>
view>
view>
template>
<script>
export default {
data(){
return{
params:{
limit:30,
order:"new",
skip:0
},
//轮播图数组
banner:[],
//列表数组
album:[]
}
}
,
mounted() {
//修改页面标题
uni.setNavigationBarTitle({title:"专辑"});
this.getList();
},
methods:{
//获取接口的数据
getList(){
this.request({
url:"http://service.picasso.adesk.com/v1/wallpaper/album",
data:this.params
})
.then(result=>{
console.log(result);
this.banner = result.res.banner;
this.album = result.res.album;
})
}
}
};
</script>
P29
https://www.jianshu.com/p/fb1d1ad58a0b
https://www.showdoc.cc/414855720281749?page_id=3678621017219602
接口文档
推荐: http://service.picasso.adesk.com/v3/homepage/vertical
专辑 http://service.picasso.adesk.com/v1/wallpaper/album
分类: http://service.picasso.adesk.com/v1/vertical/category
分类-最新-热门 http://service.picasso.adesk.com/v1/vertical/category/i d / v e r t i c a l 专 辑 h t t p : / / s e r v i c e . p i c a s s o . a d e s k . c o m / v 1 / w a l l p a p e r / a l b u m 专 辑 − 详 情 h t t p : / / s e r v i c e . p i c a s s o . a d e s k . c o m / v 1 / w a l l p a p e r / a l b u m / {id}/vertical 专辑 http://service.picasso.adesk.com/v1/wallpaper/album 专辑-详情 http://service.picasso.adesk.com/v1/wallpaper/album/id/vertical专辑http://service.picasso.adesk.com/v1/wallpaper/album专辑−详情http://service.picasso.adesk.com/v1/wallpaper/album/{id}/wallpaper
图片评论 http://service.picasso.adesk.com/v2/wallpaper/wallpaper/${id}/comment
当处理一个错误超过一个小时,且错误不在代码在环境,可以重新构建环境,而不是一直找错!