轮播图优化:
1.http请求优化 2. 方法写到methods调用 3. 用async await同步写法
This commit is contained in:
parent
d9ad531212
commit
2228c66b07
@ -7,7 +7,7 @@
|
||||
|
||||
<!-- 2.轮播图 -->
|
||||
<view class="swiper">
|
||||
<u-swiper :list="list" height="340" border-radius="0"></u-swiper>
|
||||
<u-swiper :list="swiperList" height="340" border-radius="0"></u-swiper>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
@ -17,47 +17,25 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [
|
||||
// {
|
||||
// image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
||||
// title: '昨夜星辰昨夜风,画楼西畔桂堂东'
|
||||
// },
|
||||
// {
|
||||
// image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
|
||||
// title: '身无彩凤双飞翼,心有灵犀一点通'
|
||||
// },
|
||||
// {
|
||||
// image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
|
||||
// title: '谁念西风独自凉,萧萧黄叶闭疏窗,沉思往事立残阳'
|
||||
// }
|
||||
]
|
||||
swiperList: []
|
||||
}
|
||||
},
|
||||
// 页面生命周期
|
||||
onLoad() {
|
||||
uni.request({
|
||||
url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
|
||||
})
|
||||
// .then(console.log)
|
||||
//promise会传递参数给它
|
||||
.then(res=>{
|
||||
const message = res[1].data.message
|
||||
// 方法1
|
||||
/*
|
||||
message.forEach(v => {
|
||||
v.image = v.image_src
|
||||
})
|
||||
this.list = [...message]
|
||||
*/
|
||||
//方法2
|
||||
this.list = message.map(v=>({
|
||||
...v,image:v.image_src
|
||||
}))
|
||||
//箭头函数后面跟({}), 就不会把大括号解析成语句块的开始, 而是对象的一部分,()包起来, 相当于return
|
||||
})
|
||||
this.getSwiper();
|
||||
},
|
||||
methods: {
|
||||
// getSwiper(){
|
||||
// this.$u.get("/home/swiperdata")
|
||||
// .then(res=>{
|
||||
// this.swiperList = res.message.map(v=>({...v,image:v.image_src}))
|
||||
// })
|
||||
// }
|
||||
|
||||
async getSwiper(){
|
||||
const { message } = await this.$u.get("/home/swiperdata")
|
||||
this.swiperList = message.map(v=>({...v,image:v.image_src}))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
Loading…
Reference in New Issue
Block a user