ソースを参照

feature: 适配ios15和华为的banner

Damon 6 ヶ月 前
コミット
50e86a7f9c
2 ファイル変更33 行追加3 行削除
  1. 12 2
      pages/index/index.wxml
  2. 21 1
      pages/index/index.wxss

+ 12 - 2
pages/index/index.wxml

@@ -8,7 +8,17 @@
       <view style="font-size: 32rpx; color: #333333; margin-top: 14rpx;">{{greeting}}</view>
 
       <!-- banner -->
-      <view wx:if="{{bannerList.length>0}}" class="banner_container" style="width: calc(100vw - 64rpx);   border-radius: 16rpx;">
+      <view wx:if="{{bannerList.length>0}}" class="banner_container">
+        <swiper class="swiper" indicator-dots="{{bannerList.length>1}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicator-active-color="#FFFFFF" indicator-color="#999999">
+          <block wx:for="{{bannerList}}" wx:key="index">
+            <swiper-item>
+              <image mode="widthFix" class="swiper_image" src="{{item.pic}}" data-item="{{item}}" bind:tap="onTapBanner" />
+            </swiper-item>
+          </block>
+        </swiper>
+      </view>
+      <!-- banner -->
+      <!-- <view wx:if="{{bannerList.length>0}}" class="banner_container" style="width: calc(100vw - 64rpx);   border-radius: 16rpx;">
         <swiper style="width: calc(100vw - 64rpx);   border-radius: 16rpx;" indicator-dots="{{bannerList.length>1}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicator-active-color="#FFFFFF" indicator-color="#999999">
           <block wx:for="{{bannerList}}" wx:key="index">
             <swiper-item style="width: calc(100vw - 64rpx); border-radius: 16rpx;">
@@ -16,7 +26,7 @@
             </swiper-item>
           </block>
         </swiper>
-      </view>
+      </view> -->
 
       <view class="add_device_public" bind:tap="jumpToAddDevice">
         <image mode="heightFix" src="./../../img/add_device.png" style="width: 48rpx;height: 48rpx;"></image>

+ 21 - 1
pages/index/index.wxss

@@ -728,6 +728,26 @@
 
 /************************ banner ************************/
 .banner_container {
+  width: 100%;
+  height: 264rpx;
+  margin-top: 32rpx;
+  /* 根据需要调整高度 */
+  overflow: hidden;
+  position: relative;
+  border-radius: 16rpx;
+}
+
+.swiper {
+  width: 100%;
+  height: 264rpx;
+}
+
+.swiper_image {
+  width: 100%;
+  display: block;
+}
+
+/* .banner_container {
   margin-top: 24rpx;
   height: 270rpx;
   background-color: transparent;
@@ -736,7 +756,7 @@
 .banner_item {
   height: 270rpx;
   background-color: transparent;
-}
+} */
 
 /* 设置指示点的大小和颜色 */
 .swiper_dot {