轮播图带字(vant)

最新推荐文章于 2022-05-14 09:15:42 发布

风雨中的小菜鸟

最新推荐文章于 2022-05-14 09:15:42 发布

阅读量1.6k

点赞数

分类专栏：功能

本文链接：https://blog.csdn.net/qq_41979331/article/details/107084228

版权

功能专栏收录该内容

25 篇文章 1 订阅

订阅专栏

html

  <div class="com_swiperImg">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(item, index) in images" :key="index">
        <img class="swiperImg" :src="item.url">
        <span class="imgWord">
          <span class="imgWordWidth">{{item.name}}</span>
        </span>
      </van-swipe-item>
    </van-swipe>
  </div>

js

// 轮播图的列表
      images: [
        {
          name: '第一张图片',
          url:
            'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3184090183,1766139173&fm=26&gp=0.jpg'
        },
        {
          name: '第二张图片',
          url:
            'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593342812507&di=a02821f2c081513699dd3d98cfd5f0c5&imgtype=0&src=http%3A%2F%2Fa2.att.hoodong.com%2F62%2F35%2F01300000165476121384354646686.jpg'
        },
        {
          name: '第三张图片',
          url:
            'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2135990487,1719991511&fm=26&gp=0.jpg'
        }
      ]

css

.com_swiperImg {
  margin-top: 2vw;
}
.swiperImg {
  width: 93vw;
  height: 45vw;
  border-radius: 3vw;
  border: 1px solid ghostwhite;
}
/* 图片的文字 */
.imgWord {
  position: absolute;
  bottom: 1.6vw;
  left: 3.5vw;
  width: 91vw;
  height: 10vw;
  line-height: 10vw;
  text-align: left;
  padding-left: 2vw;
  border-radius: 0 0 3vw 3vw;
  background: rgba(22, 22, 22, 0.5);
  color: #feffff;
}
/* 文字的宽度 */
.imgWordWidth {
  position: absolute;
  bottom: 0vw;
  left: 3vw;
  width: 75vw;
  overflow: hidden;
  text-overflow: clip;
  white-space: pre;
  padding: 0 1vw;
}
/* 轮播图的指示点 */
.com_swiperImg /deep/ .van-swipe__indicators {
  bottom: 5vw;
  left: 90%;
}
/* 轮播图的指示点（大小） */
.com_swiperImg /deep/ .van-swipe__indicator {
  width: 2vw;
  height: 2vw;
}
/* 轮播图的指示点颜色 */
.com_swiperImg /deep/ .van-swipe__indicator--active {
  background-color: #fdc034;
}