小程序——banner轮播

最新推荐文章于 2025-07-12 18:43:55 发布

Ustupid741

最新推荐文章于 2025-07-12 18:43:55 发布

阅读量5.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序文章标签：小程序小程序轮播

本文链接：https://blog.youkuaiyun.com/Ustupid741/article/details/80735848

小程序专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在小程序中创建一个自适应高度的Banner轮播效果，通过修改默认的圆点指示器为短横线，并实现当前选中项的高亮显示。代码包括xml、js和wxss部分，确保轮播图的高度能够根据图片内容自动调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

代码如下：

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