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

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

相关推荐
尘浮生3 小时前
Java项目实战II基于微信小程序的校运会管理系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
尘浮生7 小时前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
HerayChen10 小时前
微信小程序混合 h5 wx.miniProgram是 undefined
微信小程序·小程序·h5
耶啵奶膘14 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡16 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼20 小时前
微信小程序-prettier 格式化
微信小程序·小程序
wqq_9922502771 天前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__1 天前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
说私域2 天前
基于“开源 2+1 链动模式 S2B2C 商城小程序”的社区团购运作主体特征分析
大数据·人工智能·小程序
HUODUNYUN2 天前
小程序免备案:快速部署与优化的全攻略
服务器·网络·web安全·小程序·1024程序员节