封装request请求,然后添加给Vue.prototype,用this可以使用,主要是为了显示加载中
微信小程序image有个mode属性,可以设置宽高自适应,让高度随宽度变化,不失真
这里后来又用到了aspectFull,索性超链接小程序吧点这里
这里是缩略图,需要改变,将路径中$,替换成240或者其他值来达到缩放,由后台完成这个,我们使用就行
这里将时间戳变成日期,如moment.js库
分页效果
这是uni-app中srcoll-view的一个属性,触底就会触发,但是要注意给定高度
-y那个代表是向下滑动
<scroll-view @scrolltolower="handleToLower" class="recommed_view" scroll-y/>
.recommed_view{
//height:屏幕高度 - 头部标题高度 这里小程序屏幕高是不包含tabbar的,不用担心
//这里36是测量的 是指CSS中相对长度单位,表示相对视口高度(Viewport Height),1vh = 1% * 视口高度
//calc动态计算长度,但是注意前后留一个空格
height: calc(100vh - 36px)
}
这里因为发送一次只有30个,下次发前面就没,所以后面我们在methods中封装请求的时候,我们采用Es6的写法三点运算符来进行拼接,值得总结是发送请求的的data,代表后台要给你的回应,
这里hasMore就是一些data中的数据 判断到没到底,没什么可说的
全部代码,别忘了这里的request是封装好的,小程序不支持promise,uniapp可以,这里request代码在最上方第一条。
<script>
import moment from 'moment'
export default {
data(){
return{
//推荐列表
recommends: [],
//月份
months:{},
//热门
hots: [],
//请求的参数
param: {
//要获取几条
limit: 30,
//关键字
order: "hot",
//要跳过几条
skip: 0
},
//是否还有下一页
hasMore: true
}
},
methods:{
//滚动条触底事件
handleToLower(){
console.log('goudiaole')
// 1.修改参数 skip代表跳过几条,要加skip += limit
// 2.发送请求
// 3.需要将得到的数据拼接到hots上,否则前面的就没了
if(this.hasMore){
this.param.skip += this.param.limit
this.getList()
} else {
//提示用户没了
uni.showToast({
title: "没有了o(╥﹏╥)o",
icon: 'none'
})
}
},
//获取接口数据
getList(){
this.request({
url: "http://157.122.54.189:9088/image/v3/homepage/vertical",
data: this.param
})
.then(result=>{
//判断还有没有下一页数据
if(result.res.vertical === 0){
this.hasMore = false
return
}
if(this.recommends.length === 0){
//第一次发送请求
console.log(result)
//头部推荐模块
this.recommends = result.res.homepage[1].items
//月份模块
this.months = result.res.homepage[2]
//将时间戳 改成 18号、月 moment.js
this.months.MM = moment(this.months.stime).format('MM')
this.months.DD = moment(this.months.stime).format('DD')
console.log(this.months)
}
//获取热门数据的列表
this.hots = [...this.hots, ...result.res.vertical]
console.log(this.hots)
})
}
},
mounted(){
this.getList()
}
}
</script>
喜欢Vue,比较熟悉,今天做的慢点,因为全是手敲的,很多css部分就很繁琐,也挺好的,又熟悉了一下,已经7点啦,要去吃饭了,明天周六依然是充满希望的一天,明天加油!