微信小程序 swiper 组件 自定义样式

index.wxml

<swiper class='swiper' indicator-dots="{{options.indicatorDots}}" autoplay="{{options.autoplay}}" circular="{{options.circular}}" vertical="{{options.vertical}}" bindchange="swiperChange" interval="{{options.interval}}" duration="{{options.duration}}" previous-margin="{{options.previousMargin}}rpx" next-margin="{{options.nextMargin}}rpx">
  <block wx:for="{{swiperData}}" wx:key="index">
    <swiper-item class="swiper-item {{ index == options.currentSwiper ? 'swiper-slide-active' : 'swiper-slide-scaleY' }}">
      <navigator open-type="{{item.linkType === 2 ? 'switchTab': 'navigate'}}" url="{{item.linkType === 3 ? '/pages/show/show?url='+item.destinationUrl : item.destinationUrl}}" >
      <!-- swiper-placeholder -->
        <image src="{{ item.headUrl }}" binderror="errImg" class="slide-image" data-err-img="item[{{index}}].img" />
        <view class='item-content'>
          <text class='tags'>{{ item.subtitle }}</text>
          <view class='title'>{{ item.name }}</view>
        </view>
      </navigator>
    </swiper-item>
  </block>
</swiper>
<!--  实现点击选中样式  -->
<view class="dots">
  <block wx:for="{{ swiperData }}" wx:key="index">
    <view class="dot{{index == options.currentSwiper ? ' active' : '' }}"></view>
  </block>
</view>

index.wxss

/* 幻灯片 */
.swiper{
  width: 100%;
  height: 300rpx;
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
  margin-top: 34rpx;
}
.swiper-item{
  width: 600rpx!important;
  height: 252rpx!important;
  padding: 0 10rpx;
}
.swiper-item navigator{
  width: 100%; height: 100%; position: relative;
  background: url('swiper-placeholder.png') no-repeat;
  background-size: cover;
}
.slide-image{ 
  width: 600rpx;
  height: 100%;
  border-radius: 4rpx;
}
.swiper-slide-active{
  height: 300rpx!important;
  transition: all .1s;
}
.swiper-slide-scaleY{
  height: 252rpx!important;
  margin-top: 24rpx;
}
.item-content{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 116rpx;
    border-radius: 0 0 10rpx 10rpx;
    padding-top: 64rpx;
    padding-left: 38rpx;
    background-image: linear-gradient(180deg, rgba(238,238,238,0.00) 0%, rgba(6,6,6,0.44) 100%);
}
.item-content .tags{
  display: inline-block;
  padding: 0 20rpx;
  margin-bottom: 6rpx;
  height: 48rpx;
  background-image: linear-gradient(90deg, #3688FF 58%, #6DA6FF 100%);
  border-radius: 48rpx;
  font-family: 'PingFangSC-Medium';
  font-size: 24rpx;
  color: #fff;
  letter-spacing: 0;
  line-height: 48rpx;
  text-align: center;
}
.item-content .title{
  font-size: 32rpx;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dots{
  display: flex;
  justify-content: center;
  padding-bottom: 32rpx;
}
.dots .dot{
  width: 8rpx;
  height: 8rpx;
  margin-left: 10rpx;
  background: #D2D5DA;
  transition: all .3s;
}
.dots .dot.active{
  width: 28rpx;
  background-image: linear-gradient(90deg, #3688FF 58%, #6DA6FF 100%);
}

index.js

// components/SwiperSlider/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    swiperData: {
      type: Object,
      value: {}
    },
    swiperOptions: {
      type: Object,
      value: {}
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    options: {},
  },
  attached: function (){
    this.setData({
      options: Object.assign({}, {
        autoplay: false,
        circular: true,
        interval: 3000,
        duration: 100,
        previousMargin: 60,
        nextMargin: 0,
        displayMultipleItems: 3,
        currentSwiper: ''
      }, this.data.swiperOptions)
    })    
  },
  /**
   * 组件的方法列表
   */
  methods: {
    swiperChange: function (e) {
      this.setData({
        'options.currentSwiper': e.detail.current
      })
    }
  }
})

pages 调用

• index.json

{
  "enablePullDownRefresh": true,
  "usingComponents": {
    "swiper-slider": "/components/SwiperSlider/index"
  }
}

• index.wxml

<swiper-slider swiper-data="{{topicList}}" swiper-options="{{swiperOptions}}"></swiper-slider>

• index.js

data: {
  topicList: [],
  swiperOptions: {
    autoplay: false,
    circular: true,
    interval: 3000,
    duration: 120,
    previousMargin: 60,
    nextMargin: 0,
    displayMultipleItems: 3,
    currentSwiper: ''
  },
}