⑪ 轮播图组件
微信小程序提供了一个<swiper>轮播图组件，其中只可放置swiper-item组件，swiper有一些常用的属性，如:
indicator-dots: 是否显示面板指示点;
autoplay: 是否自动切换;
interval: 设置自动切换时间间隔;
duration: 滑动动画时长;
circular: 是否循环播放;
indicator-active-color: 设置当前选中的指示点颜色;
<swiper :indicator-dots="indicatorDots" :autoplay="autoPlay" :interval="interval" :duration="duration" :circular="circular" indicator-active-color="rgba(255,255,255, 0.6)"> <block v-for="(item, index) in imgUrls" :key="index"> <swiper-item> <img :src="item" class="slide-item"/> </swiper-item> </block> </swiper> 当然，<swiper>组件不仅仅能实现图片的轮播，还可以实现其他轮播，比如列表内容的轮播(导航和内容的联动)，我们不给其添加indicator-dots、autoplay、interval、duration、circular等属性，而是通过手进行滑动，swiper组件还有一个current属性，属性值为滑动块的索引值，用于显示对应的滑动item，从而实现导航和内容的联动，即点击导航，自动切换到对应内容。swiper组件也提供了change事件，当我们手动滑动滑动item的时候，就会触发change事件，可以在事件对象中拿到对应滑块的索引，从而更新导航位置，实现滑动内容，自动高亮导航位置。⑫ 可滚动区域组件
微信提供了一个<scroll-view>可滚动区域组件，用于设置该区域中的内容是可以滚动的，通常用于实现可滚动的导航标签栏，其常用属性为:
scroll-x: 是否允许横向滚动;
scroll-y: 是否允许纵向滚动;
scroll-into-view: 属性值为对应滚动item的id，表示自动滚动到对应id元素位置;
scroll-with-animation: 在设置滚动条位置时使用动画过渡;
要实现点击某个滚动item后，自动滚动到对应滚动item位置，那么需要给每个滚动item添加一个id，然后动态改变scroll-into-view的值为对应的滚动item的id即可。 <scroll-view class="btns_wrap" scroll-x :scroll-into-view="toChildView" scroll-with-animation> <span :class="{active: currentIndex === index}" class="btn_scroll" v-for="(item, index) in allLessons" :key="index" :id="item.id" @click="switchItem(index)"> {{item.name}} </span> </scroll-view>