在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，無論調用的時候用什么值，都會顯示指示器，而其他屬性改變了是可以改變輪播圖的運行的，如果有哪位剛好知道，請告知解惑，謝謝！
