更新记录

1.0.0(2019-09-28) 下载此版本

模板实现了swiper-dot样式的自定义,经常遇到原生swiper的样式不能满足需求,我简单实现了一个样式,如果有需要直接把使用示例拷贝到页面里面,可以在css里面直接修改成需要的样式


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

使用示例

<template>
  <view class="container">
      <!-- 轮播 -->
      <swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" :current="swiperCurrent" @change="changeSwiper">
          <swiper-item v-for="item in swiperImg" :key="item.id">
              <image class="swiper-item" :src="item" mode="widthFix"></image>
          </swiper-item>
      </swiper>
      <!-- 轮播指示点样式修改 -->
      <view class="dots">
          <block v-for="(item,index) in swiperImg.length" :key="item">
              <view class="dot" :class="index==swiperCurrent ? ' active' : ''"></view>
          </block>
      </view>
  </view>
</template>

<script>
  export default {  
      data() {          
          return {              
              swiperImg: [
                  '../../static/swiper.png',
                  '../../static/swiper.png'
              ],
              current: 0,
              swiperCurrent: 0,
          };
      },
      methods: {
          changeSwiper(e) {
              this.swiperCurrent = e.detail.current;
          }
      }

  }
</script>

<style lang="scss">
  .container {
      position: relative;

      .swiper {
          width: 700rpx;
          height: 240rpx;
          border-radius: 16rpx;
          overflow: hidden;
          margin-top: 16rpx;
          position: relative;
          margin-left: 26rpx;

          .swiper-item {
              width: 700rpx;
              height: 240rpx;
              border-radius: 16rpx;
          }

      }

      .dots {
          position: absolute;
          bottom: 20rpx;
          left: 50%;
          // 这里一定要注意兼容不然很可能踩坑          
          transform: translate(-50%, 0);
          -webkit-transform: translate(-50%, 0);        
          z-index: 99;
          display: flex;
          flex-direction: row;
          justify-content: center;

          .dot {
              width: 24rpx;
              height: 8rpx;
              transition: all .6s;
              background: rgba(0, 0, 0, .3);
              margin-right: 10rpx;
          }

          .active {
              width: 24rpx;
              height: 8rpx;
              background: rgba(255, 255, 255, .8);
          }
      }
  }
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问