小程序中实现轮播图左向堆叠

最新推荐文章于 2024-11-10 14:45:00 发布

我爱画页面

最新推荐文章于 2024-11-10 14:45:00 发布

阅读量1.1k

点赞数 3

文章标签：小程序

本文链接：https://blog.csdn.net/qdm13209211861/article/details/136876268

版权

文章详细描述了一个微信小程序中的my-swiper组件，用于实现图片轮播，通过WXML、JSON和WXSS文件展示了组件结构、样式和数据配置。组件会根据图片数量动态调整zIndex和left属性，实现图片从左向右堆叠的动画效果。

摘要由CSDN通过智能技术生成

1、效果图：

轮播图左向堆叠

2、封装的组件：

my-swiper.wxml

<view>
  <view class="tower-swiper" bindtouchend="TowerEnd">
    <view class="tower-item" wx:for="{{swiperList}}" wx:key="index" style="transform: scale(calc(0.4 + {{item.zIndex}} / 5));margin-left:calc({{item.mLeft}} * 22rpx); z-index: {{item.zIndex}};">
      <view class="swiper-item">
        <image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image>
      </view>
    </view>
  </view>
</view>

my-swiper.json

{
  "component": true,
  "usingComponents": {}
}

my-swiper.wxss

.tower-swiper {
  width: 50rpx;
  position: relative;
}

.tower-swiper .tower-item {
  position: absolute;
  width: 50rpx;
  height: 50rpx;
  top: 0;
  bottom: 0;
  left: 50%;
  margin: auto;
  transition: all 0.2s ease-in 0s;
  opacity: 1;
}

.tower-swiper .tower-item .none {
  opacity: 0;
}
.swiper-item image {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
}

my-swiper.js

Component({

  /**
   * 组件的属性列表
   */
  properties: {
    swiperList: {
      type: Array,
      value: [
        {
          id: 0,
          type: 'image',
          url: 'https://s3.cn-northwest-1.amazonaws.com.cn/amemori-s3-cn-northwest-1/ImagesFolder/6dcecb85a997478d8aa27045195633c0.png'
        },
        {
          id: 1,
          type: 'image',
          url: 'https://s3.cn-northwest-1.amazonaws.com.cn/amemori-s3-cn-northwest-1/ImagesFolder/5fc17d5232a84bdc9a43f72300a15ec1.png',
        }, {
          id: 2,
          type: 'image',
          url: 'https://s3.cn-northwest-1.amazonaws.com.cn/amemori-s3-cn-northwest-1/ImagesFolder/c236b580936a4af1a16d6e29ed8d2e1d.png'
        },
        // {
        //   id: 3,
        //   type: 'image',
        //   url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
        // },
        // {
        //   id: 4,
        //   type: 'image',
        //   url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
        // }, 
        // {
        //   id: 5,
        //   type: 'image',
        //   url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
        // }, 
        // {
        //   id: 6,
        //   type: 'image',
        //   url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
        // }
      ]
    },
    towerStart: {
      type: Number,
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    timer: null,
    towerStart: 0,
    direction: 'right'
  },
  lifetimes: {
    attached() {
      this.TowerSwiper()
      this.swiperOn()
    },
    detached() {
      clearInterval(this.data.timer); // 清除定时器
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    swiperOn() {
      const _this = this
      let timer = this.data.timer
      if (!timer) {
        timer = setInterval(() => {
          _this.TowerEnd()
        }, 2000)
        this.setData({
          timer
        })
      }
    },
    // 初始化towerSwiper
    TowerSwiper() {
      let list = this.data.swiperList;
      for (let i = 0; i < list.length; i++) {
       // 如果是list.length/2 :当前项的zIndex 的计算方式是：轮播图总数的一半加一，再减去当前项到中间项的距离（即绝对值的差） 这样，中间项的 zIndex 最大，其他项的 zIndex 随着距离中间项的远近逐渐减小。
        //在这里我需要逐次向左变大，而不是中间大两遍小，所以我改成了list.length / 1
        list[i].zIndex = parseInt(list.length / 1) + 1 - Math.abs(i - parseInt(list.length / 1))
        list[i].mLeft = i - parseInt(list.length / 1)
      }
      this.setData({
        swiperList: list
      })
    },
    // towerSwiper计算滚动
    TowerEnd() {
      let direction = this.data.direction;
      let list = this.data.swiperList;
      if (direction == 'right') {
        let mLeft = list[0].mLeft;
        let zIndex = list[0].zIndex;
        for (let i = 1; i < this.data.swiperList.length; i++) {
          list[i - 1].mLeft = list[i].mLeft
          list[i - 1].zIndex = list[i].zIndex
        }
        list[list.length - 1].mLeft = mLeft
        list[list.length - 1].zIndex = zIndex
      } else {
        let mLeft = list[list.length - 1].mLeft;
        let zIndex = list[list.length - 1].zIndex;
        for (let i = list.length - 1; i > 0; i--) {
          list[i].mLeft = list[i - 1].mLeft
          list[i].zIndex = list[i - 1].zIndex
        }
        list[0].mLeft = mLeft;
        list[0].zIndex = zIndex;
      }
      this.setData({
        direction,
        swiperList: list
      })
    },
  }
})

在父组件中使用：

{
  "usingComponents": {
    "mySwiper":"../component/my-swiper/my-swiper"
  }
}

<mySwiper swiperList="{{activeAvatars}}"></mySwiper>

结束！！！

参考文章：https://mstzf.cn/posts/mp-tower-swiper/index.html