## **效果**
当滑动轮播图时，swiper指示器会显示轮播图的总数和当前滑动轮播图的顺序，以及根据当前轮播图显示背景颜色。
## **轮播图滑动实现**
组件`nav-carousel.vue`所要接收的数据类型为数组（`Array`）
```
carouselList:Array,
```
当`nav-carousel`组件从父组件接收到`carouselList`时，会通过`v-for`来进行循环，将`carouselList`中的每个对象赋值给`item`,在通过`item.src.`获取到轮播图片
```
v-for="(item, index) in carouselList" :key="index"
```
## **滑动显示当前序号实现**
使用 $emit 触发父组件的自定义事件，并传入`event`的值，子组件中是通过`@change`来调用此方法的
```
swiperChange(e){
this.$emit("swiperChange", e)
}
```
设置`index`变量，将`event`中的`current`赋予给它
```
let index = e.detail.current;
```
通过绑定`index`来计算出当前显示序号
```
this.swiperCurrent = index;
```
因为数组的索引是从`0`开始的，想要动态显示第一张的序号，就必须进行加1操作
```
{{swiperCurrent+1}}
```
轮播图总数：
轮播图总数等于`carouselList`数组的长度
```
this.swiperLength = carouselList.length;
```
```
{{swiperLength}}
```
## **切换背景色**
当我们进入页面时所看到的背景色为`carouselList`数组中的第`0`个`background`
```
this.titleNViewBackground = carouselList[0].background;
```
当页面滑动时，背景色会随着定义变量`index`的改变而改变
```
this.titleNViewBackground = this.carouselList[index].background;
```
## **轮播图点击事件**
使用 $emit 触发父组件的自定义事件，并传入`title`的值，子组件中是通过`@tap`来调用此方法的
```
navToDetailPage(title){
this.$emit("navToDetailPage",title)
},
```
父组件中定义变量`id`,因为测试数据没有写id，用title代替,通过`navigateTo`进行页面跳转并传入`id`
```
uni.navigateTo({
url: `/pages/product/product?id=${id}`
})
```
在product页面中的`onLoad`方法接收所传入的`id`，为什么是`options.id`？
```
let id = options.id;
```
## **父组件源码**
```
/**
* 请求静态数据只是为了代码不那么乱
* 分次请求未作整合
*/
async loadData() {
let carouselList = await this.$api.json('carouselList');
this.carouselList = carouselList;//数组赋值
this.titleNViewBackground = carouselList[0].background;
this.swiperLength = carouselList.length;
},
```
```
//轮播图切换修改背景色
swiperChange(e) {
console.log(e)
let index = e.detail.current;
this.swiperCurrent = index;
this.titleNViewBackground = this.carouselList[index].background;
},
```
```
//详情页
navToDetailPage(title) {
//测试数据没有写id，用title代替
let id = title;
uni.navigateTo({
url: `/pages/product/product?id=${id}`
})
},
```
```
titleNViewBackground: '',
swiperCurrent: 0,
swiperLength: 0,
carouselList: [],
title:'轮播广告'
```
```
<!-- 自定义swiper指示器 -->
<text class="num">{{swiperCurrent+1}}</text>
<text class="sign">/</text>
<text class="num">{{swiperLength}}</text>
```
```
<!-- 背景色区域 -->
<view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view>
```
