小程序——banner轮播 - 好文

这是效果图。将默认的圆点变成短横线，当前活动的短横线较长并切是红色背景。以及轮播高度随着图片高度自适应。

代码如下：

xml：
<swiper class='swiper-box' indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"
style='height:{{Height}}'> <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：
Page({ data: { // 轮播 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,
changeIndicatorDots: function (e) { this.setData({ indicatorDots:
!this.data.indicatorDots }) }, changeAutoplay: function (e) { this.setData({
autoplay: !this.data.autoplay }) }, intervalChange: function (e) {
this.setData({ interval: e.detail.value }) }, durationChange: function (e) {
this.setData({ duration: e.detail.value }) },} //轮播结束 //轮播高度自适应——获取图片高度
imgHeight: function (e) { var winWid = wx.getSystemInfoSync().windowWidth;
//获取当前屏幕的宽度 var imgh = e.detail.height;//图片高度 var imgw = e.detail.width;//图片宽度
var swiperH = winWid * imgh / imgw + "px" this.setData({ Height: swiperH//设置高度
}) } })
wxss：
/* 轮播 */ .slide-image{ width: 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; }

热门工具换一换