小程序头像轮播效果的实现

效果

头像轮播，前一张渐出，后一张渐进移动
才发现不能用本地视频呐

代码

<template>
  <view class="container">
    <view class="imgs-box">
      <view class="imgs" style="right:{{right}}rpx;{{imgsStyle}}">
        <image
          wx:for="{{showImageList}}"
          wx:key="index"
          class="user-img {{index == startShowIndex || index == startShowIndex - 1 ? 'show': 'hidden'}} {{isAllTransi?'transi':''}}"
          style="z-index:{{userPortraitCount-index}};margin-right:{{-imgMove}}rpx;
            {{index==startShowIndex+1?currentStyle:''}}
            {{index == 0 || index == 1?headImageStyle:''}}
            {{(index == userPortraitCount - 1 || index == userPortraitCount - 2)?footerImageStyle:''}}
            {{index == startShowIndex - 1?nextStyle:''}} "
          src="{{ item }}"
          mode="aspectFit"
        />
      </view>
    </view>
    <image src="https://pt-starimg.didistatic.com/static/starimg/img/hPHIofanyH1621502629720.png" class="fixed-avatar"></image>
    <text class="user-tips">{{ tips }}</text>
    <c-icon type="click" class="icon" wx:if="{{isShowArrIcon}}" />
  </view>
</template>

<script>
/* eslint-disable */
import { createComponent } from '@mpxjs/core'

createComponent({
  properties: {
    userPortrait: {
      type: Array
    },
    tips: {
      type: String,
      value: ''
    },
    isShowArrIcon: {
      type: Boolean,
      value: true
    },
    maxMoveStep: {
      type: Number,
      value: 3
    },
    imgMove: {
      type: String | Number,
      value: 17
    }
  },
  data: {
    intervalHandler: null,
    startShowIndex: 0,
    isAllTransi: false, //控制给所有元素加上过渡
    showCount: 2, // 外漏展示 3 个
    // left: 0,
    right: 0,
    imgsStyle: '',
    headImageStyle: '',
    footerImageStyle: '',
    currentStyle: '',
    nextStyle: '',
    oneStep: 19
  },
  computed: {
    userPortraitCount() {
      return this.showImageList?.length
    },
    showImageList() {
      let tmpArr = [...this.userPortrait]
      for (let i = 0; i < this.showCount; i++) {
        tmpArr.push(this.userPortrait[i])
      }
      return tmpArr.slice(0, 98)
    }
  },
  methods: {
    loopHandle() {
      if (this.intervalHandler) {
        clearInterval(this.intervalHandler)
      }
      this.startShowIndex = this.userPortraitCount - 1
      this.intervalHandler = setInterval(() => {
        if (this.startShowIndex <= 1) {
          this.headImageStyle = 'transition:all 0s;'
          this.footerImageStyle = 'transition:all 0s;'

          this.startShowIndex = this.userPortraitCount - 1
          this.right = 25
          this.imgsStyle = 'transition:all 0s;'

          this.startShowIndex--
          setTimeout(() => {
            this.imgsStyle = 'transition:all 0.6s;'

            this.right = -(this.userPortraitCount - this.startShowIndex - 2) * this.oneStep
          }, 100)
        } else {
          this.currentStyle = 'transition:all 0s;'

          this.startShowIndex--
          this.nextStyle = 'transition:all 0.6s ease-in 0.6s;'
          setTimeout(() => {
            this.right = -(this.userPortraitCount - this.startShowIndex - 2) * this.oneStep
            this.imgsStyle = 'transition:right 0.6s;'

            this.isAllTransi = true
          }, 100)
        }
      }, 1500)
    }
  },
  lifetimes: {
    detached() {
      if (this.intervalHandler) {
        clearInterval(this.intervalHandler)
      }
    },
    ready() {
      this.loopHandle()
    }
  }
})
</script>

<style lang="stylus">
.container {
  position relative
  display flex
  align-items center
  justify-content center
  .imgs-box{
    width 70rpx
    height 35rpx
    position relative
    // overflow hidden
  }
}
.imgs {
  white-space nowrap
  width fit-content
  position absolute
  top 0
}
.user-img, .user-text{
  position relative
  box-sizing border-box
  width 36rpx
  height 36rpx
  border 1rpx solid #ffffff
  border-radius 50%
  transition opacity 0.6s
  // transition-delay 1s
  // opacity 0
}
.user-img {
  background #ffffff
}
.user-tips {
  font-family: PingFangSC-Regular;
  font-size: 22rpx;
  color: #666666;
  letter-spacing: 0;
  text-align: right;
  line-height: 24rpx;
  padding-top 4rpx
}
.user-text{
  position relative
  box-sizing border-box
  width 36rpx
  height 36rpx
  border 1rpx solid #FFF2EE
  border-radius 50%
}
.arr-icon
  width 8rpx
  height 14rpx
  margin-left 5rpx
.hidden
    opacity 0
.show
    opacity 1
.transi
  transition : all 0.6s ease-in 0.6s
.icon {
  font-size 14rpx
  margin-left 4rpx
  margin-top: 1rpx
  color #666666
  line-height 14rpx
  margin-top 4rpx
}
.fixed-avatar
  margin-left: -26rpx;
  margin-top: 5rpx;
  margin-right 8rpx
  width 38rpx
  height 38rpx
  box-sizing border-box
  border 1rpx solid #ffffff
  border-radius 50%
</style>

<script name="json">
module.exports = {
  component: true,
  usingComponents: {}
}
</script>