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

1、效果图:

轮播图左向堆叠

2、封装的组件:

my-swiper.wxml

html 复制代码
<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

html 复制代码
{
  "component": true,
  "usingComponents": {}
}

my-swiper.wxss

css 复制代码
.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

javascript 复制代码
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
      })
    },
  }
})

在父组件中使用:

javascript 复制代码
{
  "usingComponents": {
    "mySwiper":"../component/my-swiper/my-swiper"
  }
}
html 复制代码
<mySwiper swiperList="{{activeAvatars}}"></mySwiper>

结束!!!

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

相关推荐
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
paopaokaka_luck10 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23413 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
蜕变菜鸟13 小时前
小程序跳转另一个小程序
小程序
16 小时前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
19 小时前
微信小程序运营日记(第四天)
微信小程序·小程序
guanpinkeji19 小时前
旧衣回收小程序:提高回收效率,扩大服务范围
大数据·小程序·团队开发·软件开发·小程序开发·旧衣回收·旧衣回收小程序
说私域21 小时前
完美日记营销模式对开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序的启示
人工智能·小程序
说私域21 小时前
传统媒体终端移动化发展新趋势:融合开源 AI 智能名片与 S2B2C 商城小程序的创新探索
人工智能·小程序·零售
DK七七21 小时前
当今陪玩系统小程序趋势,陪玩系统源码搭建后的适用于哪些平台
小程序·php·uniapp