微信小程序之将轮播图设计为组件

在components文件夹上点右键，新建component，命名为swiper

然后将我们之前的代码都拷贝到对应文件中，

然后我们的页面要引用这个组件，

在pages\index\index.json中引入：

{  
  "usingComponents": {
    "van-search": "@vant/weapp/search/index",
    "my-swiper":"../../components/swiper/swiper"
  }
}

在index.wxml中使用

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，无论调用的时候用什么值，都会显示指示器，而其他属性改变了是可以改变轮播图的运行的，如果有哪位刚好知道，请告知解惑，谢谢！