先看效果： 如果大家有喜茶小程序，可以進入查看首頁輪播效果圖，大概就是那個效果。

捋一下我開發(fā)過程的思路，一共有兩個。

第一個思路： 用微信小程序的組件，swiper實現(xiàn)上層透明照片的輪播效果，底層的照片根據(jù)swiper組件的bindchange,bindtransition,bindanimationfinish三個方法組合使用來實現(xiàn)輪播左右滑動的過程中，opacity的變化以及上下索引的變化，進而根據(jù)索引來更換底層的照片，底層是寫了兩層圖片，動態(tài)手動的更換背景圖以及處理opacity的值的變化。由于swiper在切換過程中，其實有兩個索引，一個是當前的一個是下一個的，分別是index 與 current ， 他們會在某一個時刻不同但是更多時候索引是相同的，導(dǎo)致opacity在輪播自動播放的情況下，淡入淡出的效果不明顯。所以最終效果實現(xiàn)了90%，最后10%的效果沒有解決思路，雖然產(chǎn)品說實在沒辦法也可以但是自己依然覺得不太好。

第二個思路： 上層的透明圖片部分依然不變，使用微信小程序組件swiper實現(xiàn)輪播的變換，但是底層的照片淡入淡出效果直接使用一個數(shù)組填充底層圖片的地址來顯示，根據(jù)輪播的索引，直接底層圖片的索引與上層輪播的索引對應(yīng)上的時候直接opacity展示為1，其他索引下的opacity則為0。原理類似前端經(jīng)常用active來設(shè)置選中的項目展示不同的樣式。此種方法簡便效果100%，可惜自己一開始沒有想到。

重點代碼如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-610138.html

<view wx:if="{{swiperImgs.length}}" style="position: relative">
  <!-- 這里單獨開一層，用于處理底層輪播圖，需要定位位置、根據(jù)下面的輪播來處理對應(yīng)的數(shù)據(jù) -->
  <view class="qm-banner-underImg uperUderImg">
    <view class="aaaa" wx:for="{{underImgList}}" wx:key="index" style="opacity:{{index == currentIndex?'1':'0'}};">
      <image lazy-load src="{{item.underImg}}" style="width: 100%"></image>
    </view>
  </view>
  <swiper
    class="v-qm-banner"
    style="{{miniStyle}}"
    autoplay="{{true}}"
    circular
    indicator-active-color="{{indicatorStyle}}"
    data-index="{{currentIndex}}"
    bindchange="swiperChange"
  >
    <swiper-item class="swiper-item" wx:for="{{ swiperImgs}}" wx:key="index">
      <view catchtap="bindLink" data-item="{{item}}" style="height:{{filter.styleToObj(data.miniStyle).height}};">
        <image lazy-load mode="widthFix" class="image" src="{{item.img}}"></image>
      </view>
    </swiper-item>
  </swiper>
</view>

import { $component } from '@/libs/mpext'
import { getSwiperImages } from './banner'
const app = getApp()

$component({
  mapState: [],
})({
  properties: {
    data: {
      type: Object,
      value: {},
      observer(val) {
        if (!val) return
        this.handleSwiperData()
      },
    },
    index: {
      type: Number,
      value: 0,
    },
  },
  data: {
    currentIndex: 0,
  },
  pageLifetimes: {
    show() {
      this.handleSwiperData()
    },
  },
  methods: {
    handleSwiperData() {
      const { data } = this.data
      const imgs = data?.propsValue?.imgs || []

      // 過濾下當前可顯示的數(shù)據(jù)
      const swiperImgs = getSwiperImages(imgs)
      const underImgList = []
      swiperImgs.forEach((ele, index) => {
        underImgList.push({ index: index, underImg: ele.underImg })
      })
      this.setData({
        underImgList,
      })
    },

    // 輪播變動
    swiperChange(currnet) {
      const currentIndex = currnet.detail.current
      this.setData({
        currentIndex,
      })
    },
  },
})

// banner
.v-qm-banner {
  z-index: 999;
  background: transparent;

  .image {
    width: 100%;
  }

  .qm-banner-swiper-item {
    position: relative;
  }

  .underImg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 390rpx;
  }

  .qm-banner-swiper-item-box {
    background-size: cover;
    opacity: 0;
    transition-property: opacity;
  }
}

.qm-banner-underImg {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

.uperUderImg {
  width: 100%;
  height: 100%;
}

.aaaa {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  transform: translate(0%, 0) translateZ(0);
  transition: 1s;
}

到了這里，關(guān)于小程序輪播，上下兩層圖片，底層漸變淡入淡出，上層動畫劃入效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！