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

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

相关推荐
说私域1 小时前
人工智能赋能美妆零售数字化转型:基于开源AI大模型的S2B2C商城系统构建
人工智能·小程序·开源·零售
说私域2 小时前
数智化时代下开源AI大模型驱动的新型商业生态构建——基于AI智能名片与S2B2C商城小程序的融合创新研究
人工智能·小程序·开源
黑马源码库miui520867 小时前
心理咨询法律咨询预约咨询微信小程序系统源码独立部署
微信小程序·小程序·uni-app·php·微信公众平台
暮雨哀尘1 天前
微信小程序开发:微信小程序组件应用研究
算法·微信·微信小程序·小程序·notepad++·微信公众平台·组件
狂团商城小师妹1 天前
经销商订货管理系统小程序PHP+uniapp
微信·微信小程序·小程序·uni-app·php·微信公众平台
ckx666666cky1 天前
支付宝关键词排名优化策略:提升小程序曝光的关键
大数据·搜索引擎·小程序·支付宝小程序·支付宝关键词排名优化·支付宝排名优化
_oP_i1 天前
小程序中过滤苹果设备中的表情(即 emoji)
小程序
然后就去远行吧1 天前
小程序API —— 56页面处理函数 - 下拉刷新
小程序
ALLSectorSorft1 天前
打车APP订单系统逻辑梳理与实现
小程序·订单系统·打车app
低代码布道师2 天前
加油站小程序实战教程01首页搭建
低代码·小程序