小程序无缝轮播组件（点击查看，指示点，指示文字）

谁借莪１个温暖的怀抱￠ 2023-06-06 12:12 48阅读 0赞

## **1.效果图：** ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70 1][]

\* 文件名自己定义，json引用就不写了

## **2.组件代码：** ##

**wxml:**

<swiper 
      indicator-dots="{
       {showDots}}"
      autoplay="{
       {autoPlay}}" 
      interval="{
       {interval}}" 
      duration="{
       {duration}}" 
      circular="{
       {true}}"
      indicator-color="{
       {dotsColor}}"
      indicator-active-color="{
       {activeDotsColor}}"
      bindchange="bannerChange"
    >
      <div class="loading" wx:if="{
       {imgArr.length == 0}}">
        loading
      </div>
      <block wx:for="{
       {imgArr}}" wx:key="{
       {index}}">
        <swiper-item >
          <image src="{
       {item + '?x-oss-process=style/hd'}}" class="slide-image" mode='aspectFill' bindtap='previewImg'
          data-previewurl='{
       {imgArr}}' data-currenturl='{
       {item}}'/>
        </swiper-item>
      </block>
    </swiper>

**js：**

/**
     * ！！！common-banner默认宽高100%，需再外部包一层<view>并设置宽高
     * showDots [Boolean] 是否显示指示点 [默认true]
     * autoPlay [Boolean] 是否自动轮播 [默认true]
     * interval [Number] 切换间隔 [默认5000]
     * duration [Number] 切换运动时间 [默认500]
     * loop	[Boolean] 是否循环滚动 [默认true]
     * dotsColor [String] 指示点颜色 [默认rgba(0, 0, 0, .3)]
     * activeDotsColor [String] 激活的指示点颜色 [默认#000]
     * imgArr [Array] banner内容 [默认为空数组]
     * hasTapEvent [Boolean] 点击banner是否触发跳转事件 [默认true]
     * imgArr 格式：[]
       bind:sendInfoMethod banner改变函数， 会向page回传当前页index与总数
     */
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
        /**
         * 属性名：{
         *  type：类型（必填）String, Number, Boolean, Object, Array, null（表示任意类型）
         *  value：默认值
         * }
         */
        showDots: { // 是否显示指示点
          type: Boolean,
          value: true,
        },
        autoPlay: { // 是否自动轮播
          type: Boolean,
          value: true,
        },
        interval: { // 切换间隔
          type: Number,
          value: 5000,
        },
        duration: { // 切换运动时间
          type: Number,
          value: 500,
        },
        loop: { // 是否循环滚动
          type: Boolean,
          value: true,
        },
        dotsColor: { // 指示点颜色
          type: String,
          value: 'rgba(0, 0, 0, .3)',
        },
        activeDotsColor: { // 激活的指示点颜色
          type: String,
          value: '#000',
        },
        imgArr: { // 图片数组
          type: Array,
          value: [],
        },
        hasTapEvent: {
          type: Boolean,
          value: true,
        }
      },
      /**
       * 组件的初始数据
       */
      data: {},
      /**
       * 组件的方法列表
       */
      methods: {
        previewImg(e){
          // console.log(e)
          var arr = [];
          for (var i = 0; i < e.currentTarget.dataset.previewurl.length;i++){
            arr.push(e.currentTarget.dataset.previewurl[i].originUrl)
          }
          var currentUrl = e.currentTarget.dataset.currenturl;
          var previewUrls = e.currentTarget.dataset.previewurl;
          wx.previewImage({
            current: currentUrl, //必须是http图片，本地图片无效
            urls: previewUrls, //必须是http图片，本地图片无效
          })
        },
        // banner改变函数， 会向page回传当前页index与总数
        bannerChange(e) {
          let bannerChangeInfo = {
            current: e.detail.current, // 当前页
            total: this.properties.imgArr.length, // 总
          }
          // console.log(bannerChangeInfo)
          this.triggerEvent('sendInfoMethod', bannerChangeInfo);
        }
      }
    })

**wxss:**

/* components/common-banner/common-banner.wxss */
    swiper{
      width: 100%;
      height: 100%;
      position: relative;
    }
    swiper-item image{
      width: 100%;
      height: 100%;
    }
    swiper .loading{
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate3d(-50%, -50%, 0);
      transform: translate3d(-50%, -50%, 0);
      font-size: 30rpx;
      color: #aaa;
    }

## 3.正文引用 ##

**wxml：**

<view class='swiper-view'>
        <common-banner imgArr="{
       {imagesList}}" showDots="{
       {false}}" hasTapEvent="{
       {false}}" bind:sendInfoMethod="listenSwiper">
        </common-banner>
        
        <view class='swiper-num'>
          <text class='big-nub'>{
       {swiperNum}}/</text>{
       {imagesList.length}}
        </view>
      </view>

**js:**

data:{
        imagesList: [], //轮播图片
        swiperNum: 1, //轮播图第几张
    },
    // 接收banner滑动事件,右下角显示
    listenSwiper: function(e) {
        this.setData({
            'swiperNum': e.detail.current + 1
        })
    },

**wxss：**

/*banner轮播  */
    .swiper-view {
      width: 100%;
      height: 460rpx;
      position: relative;
      background-color: #eff2f4;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
    .swiper-content {
      width: 100%;
      height: 100%;
    }
    .swiper-list {
      width: 100%;
      height: 100%;
    }
    .swiper-img {
      width: 100%;
    }
    /* banner索引 */
    .swiper-num {
      position: absolute;
      bottom: 30rpx;
      right: 30rpx;
      font-size: 24rpx;
      color: #fff;
      text-align: center;
      background: rgba(0, 0, 0, 0.5);
      padding: 0 20rpx;
      height: 40rpx;
      line-height: 40rpx;
      border-radius: 20rpx;
    }
    .swiper-num .big-nub {
      font-size: 28rpx;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019101117200141.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Nhb3lhbjA4Mjk_size_16_color_FFFFFF_t_70 1]: /images/20230601/2cf2efdd732f4134b9de39b944fd633a.png