小程序——banner轮播

最新推荐文章于 2024-09-05 10:30:50 发布

Ustupid741

最新推荐文章于 2024-09-05 10:30:50 发布

阅读量5.4k

点赞数

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

本文链接：https://blog.csdn.net/Ustupid741/article/details/80735848

版权

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

摘要由CSDN通过智能技术生成

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

代码如下：

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：