在components文件夹上点右键，新建component，命名为swiper
然后将我们之前的代码都拷贝到对应文件中，
然后我们的页面要引用这个组件，
在pages\index\index.json中引入：
{ "usingComponents": {"van-search": "@vant/weapp/search/index","my-swiper":"../../components/swiper/swiper"}
}在index.wxml中使用
<view class="index-container"><view class="header"><van-search value="{{ value }}" shape="round" background="#fa2c19" placeholder="请输入搜索关键词" /><my-swipercircular="{{swiperOption.circular}}"autoplay="{{swiperOption.autoplay}}"interval="{{swiperOption.interval}}"duration="{{swiperOption.duration}}"indicator-dots="{{swiperOption.indicatorDot}}"> </my-swiper></view>
</view>
pages\index\index.js 中数据
Page({data: {value: '',swiperOption: {indicatorDot: true,autoplay: true,interval: 3000,circular: true,duration: 1000,indicatorColor:'#fff',indicatorActiveColor:'#fa2c19'} },})
pages\index\index.wxss 中之前swiper和image的样式要删除掉
.header {background-image: -webkit-linear-gradient(botton, #f1503B, #c82519 50%);background-image: linear-gradient(0deg, #f1503b, #c82519 50%);width: 100%;height: 190px;border-bottom-left-radius: 100%;border-bottom-right-radius: 100%;
}
这样就好了！！
意外：
我发现indicator-dots的属性值传递不下去，组件中设置了false，无论调用的时候用什么值，轮播图指示器都不显示，同样，组件中indicator-dots属性设置了true，无论调用的时候用什么值，都会显示指示器，而其他属性改变了是可以改变轮播图的运行的，如果有哪位刚好知道，请告知解惑，谢谢！
