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

index.wxml

  
    
      
      
        
        
          {{ item.subtitle }}
          {{ item.name }}
        
      
    
  



  
    
  

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

• index.js

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