阅读 99

uni-app 自定义轮播图 swiper 指示点位置和样式

我们在使用 uni-app 的滑块视图容器 swiper 开发 H5前端页面 轮播图时,有时候需要对轮播图的指示点的位置和样式进行自定义。类似于下图:

如图,如果不对默认的指示点位置进行移动的话,就被下面的元素所覆盖,因此此时我们必须对轮播图的指示点进行自定义。这边介绍一种最简便的方式,就是采用深度作用选择器 /deep/ 来完成。具体实现方式如下:

HTML 代码:

  1. class="banner-swiper screen-swiper square-dot"
  2. style="height: 520rpx; width:750rpx; z-index: -1; margin-top: -110rpx;"
  3. indicator-dots
  4. autoplay
  5. :interval="5000"
  6. :duration="500">
  7. v-for="(item, index) in bannerList" :key="index">
  8. :src="item.url" mode="aspectFill">

JS 代码:

  1. export default {
  2. data() {
  3. return {
  4. bannerList: [{
  5. url: ‘/static/img/pic_banner_1.jpg‘
  6. }, {
  7. url: ‘/static/img/pic_banner_2.jpg‘
  8. }, {
  9. url: ‘/static/img/pic_banner_3.jpg‘
  10. }]
  11. }
  12. }
  13. }

SCSS 代码:

//设置轮播的指示点大小
.uni-swiper-wrapper {
    /deep/ .uni-swiper-dots { // 指示点整个区域
        // bottom: 100rpx;
    }
    /deep/ .uni-swiper-dot { // 指示点元素默认样式
        width: 10upx !important;
        height: 10upx !important;
        // border: 1rpx solid #E0B079;
    }
    /deep/ .uni-swiper-dot-active { // 指示点元素激活(当前选中)状态样式
        // background: #CD9763;
    }
}

 

如果需要对轮播图 swiper 指示点位置和样式做更多的自定义,都可以在上面的样式中修改。如果对其自定义要求非常高,可以隐藏自带的指示点,改用  标签替代,这样还能实现跨端兼容。

原文:https://www.cnblogs.com/shaozhu520/p/14648211.html

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 gxwowoo@163.com 举报,一经查实,本站将立刻删除。
相关推荐