《样式设计010：模组-banner图》

描述：在开发小程序过程中，发现一些不错的案例，平时使用也比较多，稍微总结了下经验，以下内容可以直接复制使用，希望对大家有所帮助，废话不多说直接上干货！

一、模组-banner图

（一）样式图

---

 

（二）代码部分

2.1：wxml代码

<view class="banner">
  <swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="{{3000}}" duration="{{500}}" style="height: 100%;">
    <block wx:for="{{imageUrls}}" wx:key="index">
      <swiper-item>
        <image src="{{item}}" class="slide-image" mode="aspectFill"></image>
      </swiper-item>
    </block>
  </swiper>
</view>

---

 

2.2：wxjs代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imageUrls: ['https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF', 'https://t7.baidu.com/it/u=2621658848,3952322712&fm=193&f=GIF', 'https://t7.baidu.com/it/u=334080491,3307726294&fm=193&f=GIF']
  }

})

---

2.3：wxss代码 

.banner {
  width: 90%;
  height: 60px;
  margin: 0 auto;
  /* 水平居中 */
  background: linear-gradient(to right, #ffcccc, #ccffff);
  border-radius: 10px;
  /* 添加弧度，数值可以根据需要进行调整 */
  overflow: hidden;
  /* 裁剪超出部分的图片 */
  position: relative;
  /* 为了让 swiper 组件正常显示 */
}

.swiper {
  height: 100%;
  /* 让 swiper 组件填充整个 banner 区域 */
}

.swiper-item {
  width: 100%;
  height: 100%;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 使用 cover 模式让图片填充满 swiper-item */
}
/* app.wxss 文件 :暂时未生效*/
/* 自定义指示点的样式 */
.swiper-dots {
  bottom: 10px; /* 距离底部的距离 */
}

/* 修改指示点的默认样式 */
.swiper-dots .swiper-dots-item {
  width: 8rpx; /* 指示点的宽度 */
  height: 8rpx; /* 指示点的高度 */
  background-color: rgb(26, 196, 63); /* 指示点的背景颜色 */
  border-radius: 4rpx; /* 指示点的圆角 */
  margin: 0 4rpx; /* 指示点之间的间距 */
}

/* 修改当前选中指示点的样式 */
.swiper-dots .swiper-dots-item.swiper-dots-item-active {
  width: 16rpx; /* 当前选中指示点的宽度 */
  background-color: #f00; /* 当前选中指示点的背景颜色 */
}