小程序自定义美化swiper组件（自定义指示点，自定义轮播样式

痛定思痛。 2021-10-01 08:38 775阅读 0赞

修改指示点  
修改轮播样式

1、自定义指示点

swiperchange(e) {
      this.setData({
        current: e.detail.current
      })
    }

css

.singlegraph {
      position: relative;
      width: 100%;
      height: 420rpx;
      line-height: 0;
      display: flex;
      justify-content: center;
      align-items: center
    }
    .dots{ 
      position: absolute; 
      left: 0; 
      right: 0; 
      bottom: 40rpx; 
      display: flex; 
      justify-content: center; 
    } 
    .dots .dot{ 
      margin: 0 8rpx; 
      width: 14rpx; 
      height: 14rpx; 
      background:rgba(255,255,255,1); 
      border-radius: 8rpx; 
      opacity: .5;
      transition: all .6s; 
    } 
    .dots .dot.active{ 
      opacity: 1;
    }

![18749935-1dc397f647dded03.gif][]

效果

美化修改轮播样式

<view class="demo">
      <swiper
        previous-margin="180rpx"
        next-margin="180rpx"
        circular="true"
        current="{{current}}"
        bindchange="swiperchange"
      >
        <swiper-item
          wx:for="{{demolist}}" wx:key="index"
        >
          <view class="dot{{index == current ? ' active' : ''}}" style="background: {{item.color}}">
            <view class="title txtone">{{item.title}}</view>
            <view class="subtitle txtone">{{item.subtitle}}</view>
            <view class="img">
              <image></image>
            </view>
            <view class="btnTxt">立即查看<view class="order-more iconfont"></view></view>
            <view class="btn" style="background: {{item.color}}"></view>
          </view>
        </swiper-item>
      </swiper>
    </view>

// components/diy-display-ad/diy-display-ad.js
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        demolist: {
          type: Array,
          value: []
        }
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        current: 0
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        swiperchange(e) {
          this.setData({
            current: e.detail.current
          })
        }
      }
    })

css

.demo{
      background: #fff;
      padding: 40rpx 0;
    }
    .demo swiper{
      height: 480rpx;
    }
    .demo swiper-item{
      position: relative;
    }
    .demo .dot{
      width: 380rpx;
      height: 480rpx;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
      border-radius:10rpx;
      transition: .5s;
      padding: 25rpx 30rpx 0;
      color: #fff;
      box-sizing: border-box;
      overflow: hidden;
      -webkit-transform:scale(.9,.9);
    }
    .demo .dot.active{
      width: 380rpx;
      height: 480rpx;
      box-sizing: border-box;
      -webkit-transform:scale(1,1);
    }
    .txtone{
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    .demo .dot .title{
      font-size: 36rpx;
      font-weight:700;
      text-align: center;
      line-height:43rpx;
      color: #fff
    }
    .demo .dot .subtitle{
      font-size: 20rpx;
      text-align: center;
      margin: 13rpx 0 15rpx;
      color: #fff
    }
    .demo .dot .img{
      width: 100%;
      height: 300rpx;
      background: #898989;
      border-radius: 10rpx;
      border: 5rpx solid #fff
    }
    .demo .dot .btn{
      position: absolute;
      left: calc(50% - 1000rpx);
      bottom: -1924rpx;
      width: 2000rpx;
      height: 2000rpx;
      background: red;
      border-radius: 50%;
      border: 5rpx solid #fff;
      transition: .5s;
      z-index: 1
    }
    .demo .dot .btnTxt{
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      bottom: 20rpx;
      right: 0;
      left: 0;
      line-height: 40rpx;
      margin: auto;
      text-align: center;
      font-size: 28rpx;
      color: #fff;
      z-index: 99
    }
    .demo .dot .btnTxt .iconfont{
      position: relative;
      width: 13rpx;
      height: 13rpx;
      font-size: 26rpx;
      margin-left: 10rpx;
    }
    .demo .dot .btnTxt .iconfont::after, .demo .dot .btnTxt .iconfont::before{
      display: block;
      content: "";
      position: absolute;
      width: 15rpx;
      height: 2rpx;
      background: #fff
    }
    .demo .dot .btnTxt .iconfont::after{
      transform:rotate(45deg);
      top: 0;
    }
    .demo .dot .btnTxt .iconfont::before{
      transform:rotate(-45deg);
      bottom: 0;
    }

![18749935-417f588133a00a49.gif][]

效果

[18749935-1dc397f647dded03.gif]: /images/20210825/b7bdcda397b84d1990272dd4a3c3a0e6.png
[18749935-417f588133a00a49.gif]: /images/20210825/858186b42d0740df98137207aa110591.png