原生轮播图组件

src/pages/home/main.json

 {
-    
-  }
\ No newline at end of file
+  "usingComponents": { 
+    "banner": "../../../static/nativeComponents/banner/index"
+  }
+}
\ No newline at end of file

static/nativeComponents/banner/index.js

+const app = getApp()
+Component({
+  properties: {
+    // 这里定义了innerText属性，属性值可以在组件使用时指定
+    innerText: {
+      type: String
+      // value: '',
+    },
+    list: {
+      type: Array
+    },
+    datas: {
+      type: Object
+    }
+  },
+  data: {
+    // 这里是一些组件内部数据
+    message: "Hello World",
+    indicatorDots: false,
+    vertical: false,
+    autoplay: false,
+    interval: 2000,
+    duration: 500,
+    activeIndex:0,
+  },
+  methods: {
+    customMethod() {
+      console.log("hello world! I am learning 微信小程序");
+    },
+    bannerChange(val) {
+      console.log(val,'--------30')
+      this.setData({ activeIndex:val.detail.current });
+    },
+  }
+});
\ No newline at end of file

static/nativeComponents/banner/index.json

+{
+  "component": true
+}
\ No newline at end of file

static/nativeComponents/banner/index.wxml

+<view>
+  <view class="banner" 
+    style="--dotsColor:{{datas.componentData.indColor}};padding-top:{{datas.componentData.paddingList[0].value*2}}rpx;padding-bottom:{{datas.componentData.paddingList[1].value*2}}rpx;padding-left:{{datas.componentData.paddingList[2].value*2}}rpx;padding-right:{{datas.componentData.paddingList[3].value*2}}rpx;">
+    <view class="bannerItem">
+      <swiper class="swiper" indicator-dots="{{indicatorDots}}"
+        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true" bindchange="bannerChange">
+        <block wx:for="{{datas.componentData.imgList}}" wx:key="index">
+          <swiper-item>
+            <view class="swiper-item">
+              <image src="{{item.imageUrl}}" style="width:100%;border-radius:{{datas.componentData.borderRadius*2}}rpx" mode="widthFix" class="bannerImgItem"></image>
+            </view>
+          </swiper-item>
+        </block>
+      </swiper>
+      <view class="dots">
+        <view class="dotsItem {{index==activeIndex?'isDotsColor':''}} {{datas.componentData.indStyle == 'flat'?'dotsStyle1':'dotsStyle2'}}" wx:for="{{datas.componentData.imgList}}" wx:key="index"></view>
+      </view>
+    </view>
+  </view>
+</view>
+  
\ No newline at end of file

static/nativeComponents/banner/index.wxss

+.banner{
+  /* position: relative; */
+}
+.bannerItem{
+  position: relative;
+}
+.swiper{
+  width: 100%;
+  height: calc(100vw*9/16);
+  padding-bottom: 32rpx;
+}
+.swiper-item{
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.bannerImgItem{
+  width: 100%;
+  height: 100%;
+}
+.dots{
+  position: absolute;
+  bottom: 10rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  -o-transform: translateX(-50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.dotsItem{
+  margin: 0 8rpx;
+  background: rgba(255,255,255,0.4);
+}
+.dotsStyle1{
+  width: 30rpx;
+  height: 10rpx;
+  border-radius: 4rpx;
+  -webkit-border-radius: 4rpx;
+  -moz-border-radius: 4rpx;
+  -ms-border-radius: 4rpx;
+  -o-border-radius: 4rpx;
+}
+.dotsStyle2{
+  width: 20rpx;
+  height: 20rpx;
+  border-radius: 50%;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -ms-border-radius: 50%;
+  -o-border-radius: 50%;
+}
+.isDotsColor{
+  background: var(--dotsColor);
+  border-color: var(--dotsColor);
+}
\ No newline at end of file