效果图如下：
一、请求轮播图数据
实现步骤：
1、在data中定义轮播图的数组
2、在onLoad生命周期函数中调用获取轮播图数据的方法
3、在methods中定义获取轮播图数据的方法
源码如下：
<script>
export default {
data() {
return {
//轮播图的数据列表
swiperList:[]
};
},
onLoad() {
//页面加载时调用方法，获取轮播图的数据
this.getSwiperList()
},
methods: {
async getSwiperList(){
const {data:res} = await uni.$http.get('/api/public/v1/home/swiperdata')
//请求失败
if(res.meta.status !==200){
return uni.showToast({
title:'数据请求失败',
duration:1500,
icon:'none'
})
}
this.swiperList = res.message
}
}
}
</script>
二、渲染轮播图的UI结构
1、渲染UI结构
<template>
<view>
<!-- 轮播图的UI结构 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
<swiper-item v-for="(item,i) in swiperList" :key="i">
<view class="swiper-item">
<image :src="item.image_src"></image>
</view>
</swiper-item>
</swiper>
</view>
</template>
2、美化UI结构
<style lang="scss">
swiper{
height: 330rpx;
.swiper-item,image{
width: 100%;
height: 100%;
}
}
</style>
三、配置小程序分包
分包可以减少小程序首次启动时的加载时间
在项目中，我们把tabbar相关的4个页面放到主包中，把其他页面，比如商品详情页，商品列表页面放在分包里面。
在uni-app项目中，配置分包的步骤如下：
1、在项目根目录中，创建分包的根目录，命名为subpkg
2、在pages.json中，和pages节点平级的位置声明subPackages节点，用来定义分包相关的结构：
"subPackages": [
{
"root": "subpkg",
"pages": [
]
}
]
3、在subpkg目录上鼠标右键，点击新建页面选项，并填写页面的相关信息：
四、点击轮播图跳转到商品详情页面
将<swiper-item></swiper-item>节点内的view组件，改造为navigator导航组件，并动态绑定url属性的值。
1、改造之前的UI结构
<!-- 轮播图的UI结构 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
<swiper-item v-for="(item,i) in swiperList" :key="i">
<view class="swiper-item">
<image :src="item.image_src"></image>
</view>
</swiper-item>
</swiper>
2、改造之后的UI结构
<!-- 轮播图的UI结构 -->
<!-- 轮播图的UI结构 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
<swiper-item v-for="(item,i) in swiperList" :key="i">
<navigator class="swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id='+item.goods_id">
<image :src="item.image_src"></image>
</navigator>
</swiper-item>
</swiper>
五、封装uni.$showMsg()方法
当数据请求失败之后，经常需要调用uni.showToast({/*配置对象*/})方法来提示用户。此时，可以在全集封装一个uni.$showMsg()方法，来简化uni.showToast()方法的调用。具体的改造步骤如下：
1、在main.js中，为uni对象挂在自定义的$showMsg()方法：
//封装弹框的方法
uni.$showMsg = function(title = '数据请求失败！', duration = 1500) {
uni.showToast({
title: '数据请求失败',
duration: 1500,
icon: 'none'
})
}
2、今后，在需要提示消息的时候，直接调用uni.$showMsg()方法即可：
async getSwiperList() {
const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
//请求失败
if (res.meta.status !== 200) {
return uni.$showMsg()
}else{
this.swiperList = res.message
uni.$showMsg('数据请求成功！')
}
}
