轮播图

Posted 2022-09-10 neo-java

• xml代码：

<swiper class='swiper-box' indicator-dots="indicatorDots" autoplay="autoplay" interval="interval" duration="duration" >
     <block wx:for=" bannerUrls ">
         <swiper-item>
             <view>
                 <image class="slide-image" src=" item.url "  bindload='imgHeight' mode='widthFix'></image>
             </view>
         </swiper-item>
     </block>
 </swiper>

• js：

// 轮播
   bannerUrls: [
     
       url: 'https://www.71big.com/heqing/zhaojingwang/common/images/banner1.jpg',
       linkUrl: ''
     ,
     
       url: 'https://www.71big.com/heqing/zhaojingwang/common/images/banner1.jpg',
       linkUrl: ''
     ,
     
       url: 'https://www.71big.com/heqing/zhaojingwang/common/images/banner1.jpg',
       linkUrl: ''
     
   ],
   indicatorDots: true,
   autoplay: true,
   interval: 3000,
   duration: 1000,

• wxss代码：

.slide-image
 width: 100%;height: 100%;


.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal
    margin-bottom: 2rpx;

.swiper-box .wx-swiper-dot
   width:20rpx; 
   display: inline-flex;
   height: 5rpx; 
   margin-left: 10rpx;
   justify-content:space-between;

.swiper-box .wx-swiper-dot::before
   content: '';
   flex-grow: 1; 
   background: rgba(255,255,255,0.8);
   border-radius: 0rpx

.swiper-box .wx-swiper-dot-active::before
   background: #ff3333;  

.swiper-box .wx-swiper-dot-active
   width:40rpx; 


.test
 width: 100%;height: 187px;