小程序swiper製作分門別類的輪播

簡單的輪播圖在文檔中可直接使用，但有寫需求可能需要改動一下。例如，在輪播圖底部放幾個分類的按鈕，點擊各個按鈕，分別跳轉到該分類的第一張圖，當輪播圖在滾動的過程中，由分類1的最後一張圖切換爲分類2的最後一張圖，下邊的分類狀態也從第一個激活狀態變爲分類2的激活狀態，以此類推...當點擊圖片再進行分門別類的跳轉。

1.代碼

1.1wxml

<!-- 輪播圖 -->
<view class="newHouseBanner" wx:if="{{project_picture.list.length}}">
  <swiper class="newHouseBanner-swiper" autoplay="{{false}}" current="{{currentSwiper}}" bindchange="swiperChange">
    <block wx:for="{{project_picture.list}}">
      <swiper-item>
        <image class='newHouseBanner-img' src="{{item.pic_address}}" data-type="{{item.pic_type}}" data-index="{{index}}" catchtap='goDiffrent'></image>
        <!-- VR圖標:pic_type==11 -->
        <view class='newHouseBanner-vr' wx:if="{{item.pic_type==11}}" data-type="{{item.pic_type}}" data-index="{{index}}" catchtap='goDiffrent'></view>

        <!-- video圖標:pic_type==12 -->
        <view class='newHouseBanner-video' wx:if="{{item.pic_type==12}}" data-type="{{item.pic_type}}" data-index="{{index}}" catchtap='goDiffrent'></view>

      </swiper-item>
    </block>
  </swiper>
  <!-- 輪播圖底部的標籤 -->
  <view class='newHouseBannerB flex flexC' wx:if="{{!(project_picture.vr==0&&project_picture.video==0)}}">
    <view wx:if="{{project_picture.vr}}" class='newHouseBannerB-li {{(project_picture.video_n>currentSwiper)&&(currentSwiper>=project_picture.vr_n)?"on":""}}' data-current='{{project_picture.vr_n}}' bindtap='goCurrent'>VR</view>
    <view wx:if="{{project_picture.video}}" class='newHouseBannerB-li {{(project_picture.other_n>currentSwiper)&&(currentSwiper>=project_picture.video_n)?"on":""}}' data-current='{{project_picture.video_n}}' bindtap='goCurrent'>視屏</view>
    <view wx:if="{{project_picture.other}}" class='newHouseBannerB-li {{(project_picture.list.length>currentSwiper)&&(currentSwiper>=project_picture.other_n)?"on":""}}' data-current='{{project_picture.other_n}}' bindtap='goCurrent'>圖片</view>
  </view>
  <!-- 查看更多 -->
  <view class='newHouseBanner-more' catchtap='gomore'>查看更多</view>
</view>

1.2wxss

.newHouseBanner {
  width: 100%;
  height: 450rpx;
  position: relative;
}

.newHouseBanner-swiper, .newHouseBanner-swiper swiper-item, .newHouseBanner-img {
  width: 100%;
  height: 100%;
  position: relative;
}

.newHouseBanner-mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  position: absolute;
  left: 0;
  top: 0;
}

.newHouseBannerB {
  width: 100%;
  height: 40rpx;
  position: absolute;
  bottom: 20rpx;
  left: 0;
}

.newHouseBannerB-li {
  width: 88rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  background-color: olive;
  color: #fff;
  border-radius: 40rpx;
  margin-right: 20rpx;
  font-size: 24rpx;
}

.newHouseBannerB-li:last-child {
  margin-right: 0;
}

.newHouseBannerB-li.on {
  background-color: orange;
  color: red;
}

.newHouseBanner-rtIcon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 84rpx 84rpx;
  width: 84rpx;
  height: 84rpx;
  position: absolute;
  right: 0;
  top: 0;
}

.newHouseBanner-rtIcon-wz {
  color: #fff;
  font-size: 22rpx;
  transform: rotate(45deg);
  text-align: right;
}

.newHouseBanner-vr {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk0RTE2MzQ0QzU0MzExRTlCNDY2RkY4RUYzMjRDNzJBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk0RTE2MzQ1QzU0MzExRTlCNDY2RkY4RUYzMjRDNzJBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTRFMTYzNDJDNTQzMTFFOUI0NjZGRjhFRjMyNEM3MkEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTRFMTYzNDNDNTQzMTFFOUI0NjZGRjhFRjMyNEM3MkEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz49Gf1vAAAZtUlEQVR42uxd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);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 120rpx 120rpx;
  width: 120rpx;
  height: 120rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -60rpx;
  margin-top: -60rpx;
}

.newHouseBanner-video {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIyREJGRURBRDA1MTExRTlBMTIxOUNCNThBNzc4M0NBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIyREJGRURCRDA1MTExRTlBMTIxOUNCNThBNzc4M0NBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjJEQkZFRDhEMDUxMTFFOUExMjE5Q0I1OEE3NzgzQ0EiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjJEQkZFRDlEMDUxMTFFOUExMjE5Q0I1OEE3NzgzQ0EiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6jn1NHAAAR5klEQVR42uyd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);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 120rpx 120rpx;
  width: 120rpx;
  height: 120rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -60rpx;
  margin-top: -60rpx;
}

.newHouseBanner-more {
  font-size: 20rpx;
  color: #fff;
  height: 32rpx;
  line-height: 32rpx;
  width: 104rpx;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 20rpx;
  right: 15rpx;
  border-radius: 32rpx;
}

.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  display: box;
  flex-wrap: wrap;
}

.flexC {
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
}

1.3js

var that;
Page({
  data: {
    // 接口獲取的老數據
    oldarr: [{
        pic_id: "4",
        pic_type: 11,
        pic_address: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg",
        pic_thumb: "VR資源地址",
      }, {
        pic_type: 96,
        pic_id: "3",
        pic_address: "https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640",
        pic_thumb: "大圖資源地址1",
      },
      {
        pic_type: 96,
        pic_id: "2",
        pic_address: "https://images.unsplash.com/photo-1551446591-142875a901a1?w=640",
        pic_thumb: "大圖資源地址2",
      },
      {
        pic_type: 96,
        pic_id: "0",
        pic_address: "https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640",
        pic_thumb: "大圖資源地址3",
      }, {
        pic_id: "1",
        pic_type: 12,
        pic_address: "http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg",
        pic_thumb: "mp4資源地址",
      }
    ],
    // 輪播圖需要的數據
    currentSwiper: 0,
    autoplay: true,
    // 處理的數據
    project_picture: {
      list: [],
      // 不帶 _n 爲總(總：判斷是否展示該按鈕)的，帶 _n 爲當前種類的第一張圖位置（當前第一張圖的位置：點擊按鈕跳轉位置）
      vr: 0,
      vr_n: 0,
      video: 0,
      video_n: 0,
      other: 0,
      other_n: 0,
    },
  },
  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function(options) {
    that = this;
    that.gtProject_picture()
  },
  // 監聽到第幾個了
  swiperChange: function(e) {
    this.setData({
      currentSwiper: e.detail.current
    });
  },
  // 點擊跳轉到當前的圖片
  goCurrent(e) {
    var current = e.currentTarget.dataset.current;
    this.setData({
      currentSwiper: current
    });
  },
  // 點擊圖片跳轉
  goDiffrent(e) {
    // pic_type vr: 11 視頻: 12  其他圖片
    var pic_type = e.currentTarget.dataset.type;
    var index = e.currentTarget.dataset.index;
    var list = that.data.project_picture.list;
    var ziyuan = list[index].pic_thumb;
    if (pic_type == 11) {
      console.log(ziyuan);
    } else if (pic_type == 12) {
      console.log(ziyuan);
    } else {
      // 點擊查看更多  或者  其它圖片圖片類型
      console.log(ziyuan);
    }
  },
  // 點擊更多
  gomore(e) {
    console.log('getmore')
  },
  // 輪播圖相冊信息
  gtProject_picture() {

    // 從接口獲取數據進行分別處理
    var res = that.data.oldarr;
    var project_picture = {
      list: [],
      vr: 0,
      vr_n: 0,
      video: 0,
      video_n: 0,
      other: 0,
      other_n: 0,
    }
    var vr = [];
    var video = [];
    var other = [];
    if (res.length) {
      for (var i = 0; i < res.length; i++) {
        // pic_type vr:11 視頻:12  其他圖片
        if (res[i].pic_type == 11) {
          vr.push(res[i])
        } else if (res[i].pic_type == 12) {
          video.push(res[i])
        } else {
          other.push(res[i])
        }
      }
      // vr
      if (vr.length) {
        project_picture['list'] = vr;
        project_picture['vr'] = vr.length;
      } else {
        project_picture['list'] = [];
        project_picture['vr'] = 0;
      }
      // 判斷VR的第一張圖的位置
      project_picture['vr_n'] = 0;
      // video
      if (video.length) {
        project_picture['list'] = project_picture['list'].concat(video);
        project_picture['video'] = video.length;

      } else {
        project_picture['video'] = 0;
      }

      // 判斷video 的第一張的位置
      if (vr.length) {
        project_picture['video_n'] = vr.length;
      }
      if (!vr.length) {
        project_picture['video_n'] = 0;
      }
      // other
      if (other.length) {
        project_picture['list'] = project_picture['list'].concat(other);
        project_picture['other'] = other.length;
      } else {
        project_picture['other'] = 0;
      }
      // 判斷 other第第一張位置爲第幾張；
      if (vr.length && video.length) {
        project_picture['other_n'] = vr.length + video.length;
      }
      if (!vr.length && video.length) {
        project_picture['other_n'] = video.length;
      }
      if (vr.length && !video.length) {
        project_picture['other_n'] = vr.length;
      }
      if (!vr.length && !video.length) {
        project_picture['other_n'] = 0;
      }
    }
    that.setData({
      project_picture: project_picture
    });
  },
})

1.4效果

2.說明

2.1實現思路：

將後臺獲取的數據分門別類，按照按鈕的順序排列，獲取每個種類的總張數，以及當前種類的第一張圖的index，監聽swiper的bindchange事件，獲取當前的currentindex，每次改變這個值即可。