uniapp 自定义轮播图

一、 这里是做成一个子组件的方式，可以通过左右滑动切换轮播图，也可以自动轮播，复制代码就可以使用了

<template>
  <view class="swiperPanel" ref="swiperPanel" @touchstart="startMove" @touchend="endMove">
    <view class="swiperItem" v-for="(item, index) in imgList" :key="index" :style="itemStyle[index]">
      <img class="pic" :src="item">
    </view>
  </view>
</template>

<script>
  var timer
	export default {
		props: {
			imgList:{
        type: Array,
				default: []
      }
		},
		data() {
			return {
        itemStyle:[],
        slideNote: {
          x: 0,
          y: 0
        },
			};
		},
    computed:{
    },
		created() {
      this.imgList.forEach((item, index) => {
        this.itemStyle.push(this.getStyle(index))
      })
			timer = setInterval(() => {
				this.rightSlider()
			}, 15000)
		},
		methods: {
			// 动态轮播 把最后一个放到第一个
			rightSlider () {
				var newList = JSON.parse(JSON.stringify(this.itemStyle))
				var last = [newList.pop()]
				newList = last.concat(newList)
				this.itemStyle = newList
			},
			// 设置图片的样式
      getStyle (e) {
        if (e > this.imgList.length / 2) {
          var right = this.imgList.length - e
          return {
            transform: 'scale('+(1-right/10)+') translate(-'+right*13+'%,0px)',
            zIndex: 87 - right,
            opacity: 0.5 / right
          }
        } else {
          return {
            transform:'scale(' + (1 - e / 10) + ') translate(' + e * 13 + '%,0px)',
            zIndex: 87 - e,
            opacity: 0.5 / e
          }
        }
      },
      startMove (e) {
        clearInterval(timer)
        this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0
        this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0
      },
      endMove (e) {
        timer = setInterval(() => {
          this.rightSlider()
        }, 15000)
        var newList = JSON.parse(JSON.stringify(this.itemStyle))
        if (e.changedTouches[0].pageX - this.slideNote.x < 0) {
          // 向左滑动
          var last = [newList.pop()]
          newList = last.concat(newList)
        } else {
          // 向右滑动
          newList.push(newList[0])
          newList.splice(0, 1)
        }
        this.itemStyle = newList
      },
      closeShow(){
        this.$refs.popup.close()
      },
      openShow(){
				this.$refs.popup.open('conten')
			},
		}
	}
</script>

<style lang="scss" scoped>
  .swiperPanel {
    height: 520rpx;
    width: 550rpx;
    // overflow: hidden;
    position: relative;
    .swiperItem {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0upx;
      transition: all 0.5s;
      .right {
        position: absolute;
        right: 0;
        top: 0;
        width: 50%;
        height: 100%;
        background: #c29462;
        color: #fff;
        font-size: 32upx;
        padding: 10upx;
        box-sizing: border-box;
        border-radius: 0 10upx 10upx 0;
      }
      .pic {
        height: 100%;
        width: 100%;
        border-radius: 10upx;
      }
    }
  }
</style>

 二、引入组件传入图片数组

<swipe :imgList="headImgList"></swipe>