轮播图优化

src/pages/home/index.vue

@@ -203,7 +203,7 @@ export default {
       console.log("36", this.pageData);
     },
     scrolls(el){
-      if(this.$mp.page.selectComponent(".goodsListItem")){
+      if(this.$mp.page && this.$mp.page.selectComponent(".goodsListItem")){
         this.$mp.page.selectComponent(".goodsListItem").getScroll(el);
       }
     },

static/nativeComponents/Banner/index.js

@@ -21,20 +21,34 @@ Component({
     autoplay: false,
     interval: 2000,
     duration: 500,
-    activeIndex:0,
+    activeIndex: 0,
+    bannerHeight: 0,
+    firstLoad:false,
   },
   methods: {
     customMethod() {
       console.log("hello world! I am learning 微信小程序");
     },
     bannerChange(val) {
-      console.log(val,'--------30')
-      this.setData({ activeIndex:val.detail.current });
+      console.log(val, "--------30");
+      this.setData({ activeIndex: val.detail.current });
     },
-    onClick(data){
-      let item=data.currentTarget.dataset.item;
-      console.log(data.currentTarget.dataset.item,'iiii')
-      app.$themeToLink(item.link)
+    onClick(data) {
+      let item = data.currentTarget.dataset.item;
+      console.log(data.currentTarget.dataset.item, "iiii");
+      app.$themeToLink(item.link);
+    },
+    loadImg(e) {
+      let { firstLoad } = this.data;
+      if (firstLoad == true) {
+        return;
+      }
+      firstLoad = true;
+      let winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
+      let imgh = e.detail.height; //图片高度
+      let imgw = e.detail.width;
+      let swiperH = winWid * imgh / imgw + "px";
+      this.setData({ bannerHeight: swiperH, firstLoad }); //设置高度
     }
   }
 });
\ 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  data-item="{{item}}" bindtap="onClick" >
-            <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 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 {{datas.componentData.initIndSite=='onter'?'onterDot':''}}"
+			 indicator-dots="{{indicatorDots}}"
+			 autoplay="{{autoplay}}"
+			 interval="{{interval}}"
+			 duration="{{duration}}"
+			 circular="true"
+			 bindchange="bannerChange"
+			 style="height:{{bannerHeight}}"
+			>
+				<block wx:for="{{datas.componentData.imgList}}" wx:key="index">
+					<swiper-item data-item="{{item}}" bindtap="onClick">
+						<view class="swiper-item">
+							<image
+							 src="{{item.imageUrl}}"
+							 style="width:100%;border-radius:{{datas.componentData.borderRadius*2}}rpx"
+							 mode="widthFix"
+							 bindload="loadImg"
+							 class="bannerImgItem"
+							></image>
+						</view>
+					</swiper-item>
+				</block>
+			</swiper>
+			<view class="dots">
+				<view
+				 class="dotsItem {{index==activeIndex?'isDotsColor':''}} {{datas.componentData.indStyle == 'flat'?'dotsStyle1':'dotsStyle2'}} {{datas.componentData.indBorderShow==true?'dotBorder':''}}"
+				 wx:for="{{datas.componentData.imgList}}"
+				 wx:key="index"
+				></view>
+			</view>
+		</view>
+	</view>
 </view>
-  
\ No newline at end of file
+

static/nativeComponents/Banner/index.wxss

@@ -6,7 +6,9 @@
 }
 .swiper{
   width: 100%;
-  height: calc(100vw*9/16);
+  /* height: calc(100vw*9/16); */
+}
+.onterDot{
   padding-bottom: 32rpx;
 }
 .swiper-item{
@@ -38,18 +40,21 @@
   margin: 0 8rpx;
   background: rgba(255,255,255,0.4);
 }
+.dotBorder{
+  border: 1px solid var(--dotsColor);
+}
 .dotsStyle1{
-  width: 30rpx;
-  height: 10rpx;
-  border-radius: 4rpx;
-  -webkit-border-radius: 4rpx;
-  -moz-border-radius: 4rpx;
-  -ms-border-radius: 4rpx;
-  -o-border-radius: 4rpx;
+  width: 36rpx;
+  height: 12rpx;
+  border-radius: 12rpx;
+  -webkit-border-radius: 12rpx;
+  -moz-border-radius: 12rpx;
+  -ms-border-radius: 12rpx;
+  -o-border-radius: 12rpx;
 }
 .dotsStyle2{
-  width: 20rpx;
-  height: 20rpx;
+  width: 16rpx;
+  height: 16rpx;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;