微信小程序自定义轮播图滚动样式 自定义组件轮播图的实现

效果图：

实现代码：

wxml

<view class="card card_b">
  <swiper autoplay="{{true}}" interval="4000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper" circular="{{true}}">
    <block wx:for="{{imgUrls}}" wx:key="unique">
      <swiper-item>
        <view catchtap="click_swiper" id="{{index}}">
          <image src="{{item}}" class="img"></image>
        </view>
      </swiper-item>
    </block>
  </swiper>
  <view class="s_b">
    <block wx:for="{{imgUrls}}" wx:key="unique">
      <view class="dot {{index == swiperCurrent ? ' active' : ''}}"></view>
    </block>
  </view>
</view>

js

Page({
  data: {
    // 轮播
    swiperCurrent: 0,
    imgUrls: [
      '/images/banner1.jpg',
      '/images/banner2.jpg',
      '/images/banner3.jpg',
      '/images/banner4.jpg'
    ],
  },

  // 轮播
  swiperChange: function(e) {
    this.setData({
      index: e.detail.current,
      swiperCurrent: e.detail.current
    })
  },
  
  onLoad: function (options) {

  },
})

css

.card {
  background: white;
  border-radius: 15rpx;
  margin-bottom: 30rpx;
  width: 94%;
  margin-left: 3%;
}

.card_b {
  min-width: 80%;
  min-height: 200rpx;
  position: fixed;
  bottom: 20rpx;
  background: #efeff3;
}

swiper {
  height: 200rpx;
  border-radius: 15rpx;
}

swiper-item {
  /* position: relative; */
  border-radius: 15rpx;
}

swiper-item .img {
  height: 200rpx;
  width: 100%;
  border-radius: 15rpx;
}

.s_b {
  position: fixed;
  bottom: 66rpx;
  right: 36rpx;
  display: flex;
  justify-content: center;
}

.dot {
  height: 2px;
  width: 22rpx;
  background: white;
  margin-right: 6rpx;
}

.active {
  background: red;
}

到这就完成了，下面是把它封装成自定义组件的代码和引用方式。

 

 

自定义组件轮播图的实现

在项目跟目录创建 components 文件夹，里面创建 swiper 自定义组件：

swiper.js

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 轮播
    swiperCurrent: 0,
    imgUrls: [
      '/images/banner1.jpg',
      '/images/banner2.jpg',
      '/images/banner3.jpg',
      '/images/banner4.jpg'
    ],
  },
  methods: {
    // 这里是一个自定义方法

    // 轮播
    swiperChange: function (e) {
      this.setData({
        index: e.detail.current,
        swiperCurrent: e.detail.current
      })
    },
  }
})

swiper.json

{
  "component": true
}

swiper.wxml

<view class="card card_b">
  <swiper autoplay="{{true}}" interval="4000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper" circular="{{true}}">
    <block wx:for="{{imgUrls}}" wx:key="unique">
      <swiper-item>
        <image src="{{item}}" class="img"></image>
        <view class="s_b">
          <block wx:for="{{imgUrls}}" wx:key="unique">
            <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
          </block>
        </view>
      </swiper-item>
    </block>
  </swiper>
</view>

swiper.wxss

.card {
  background: white;
  border-radius: 15rpx;
  margin-bottom: 30rpx;
  width: 94%;
  margin-left: 3%;
}

.card_b {
  min-width: 80%;
  min-height: 200rpx;
  position: absolute;
  bottom: 20rpx;
  background: blue;
}

swiper{
  height: 200rpx;
}

swiper-item {
  position: relative;
}
swiper-item .img{
  height: 200rpx;
  border-radius: 15rpx;
}
.s_b {
  position: absolute;
  bottom: 26rpx;
  right: 26rpx;
  display: flex;
  justify-content: center;
}

.dot {
  height: 2px;
  width: 22rpx;
  background: white;
  margin-right: 6rpx;
}
.active{
  background: red;
}

引用该自定义组件：

在引用的页面的json配置文件中添加：

{
  "usingComponents": {
    "my_swiper": "../../components/swiper/swiper"
  }
}

在引用的页面的wxml文件中添加：

<my_swiper />

完成