轮播图

标签：ack   wip   space   test   for   view   ace   order   val   

• 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;
}

轮播图

标签：ack   wip   space   test   for   view   ace   order   val   

原文地址：https://www.cnblogs.com/neo-java/p/11436417.html