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

修改指示点
修改轮播样式

1、自定义指示点

<view class="singlegraph">
  <swiper
    class="swiper"
    indicator-active-color="#ffffff"
    current="{{current}}"
    bindchange="swiperchange"
  >
    <swiper-item class="swiper-item" wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="index">
      <image src="{{item}}"></image>
    </swiper-item>
  </swiper>
  <view class="dots"> 
    <view class="dot{{index == current ? ' active' : ''}}"></view> 
  </view>
</view>

js

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;
}

美化修改轮播样式

<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>

js

// 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;
}