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

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 = thislet timer = this.data.timerif (!timer) {timer = setInterval(() => {_this.TowerEnd()}, 2000)this.setData({timer})}},// 初始化towerSwiperTowerSwiper() {let list = this.data.swiperList;for (let i = 0; i < list.length; i++) {// 如果是list.length/2 :当前项的zIndex 的计算方式是:轮播图总数的一半加一,再减去当前项到中间项的距离(即绝对值的差) 这样,中间项的 zIndex 最大,其他项的 zIndex 随着距离中间项的远近逐渐减小。//在这里我需要逐次向左变大,而不是中间大两遍小,所以我改成了list.length / 1list[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].mLeftlist[i - 1].zIndex = list[i].zIndex}list[list.length - 1].mLeft = mLeftlist[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].mLeftlist[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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/759245.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mabatis 下

mybatis 原生的API&注解的方式MyBatis-原生的API调用快速入门需求快速入门代码实现 MyBatis-注解的方式操作快速入门需求快速入门代码实现注意事项和说明 mybatis-config.xml配置文件详解说明properties属性settings全局参数定义typeAliases别名处理器typeHandlers类型处理…

几个特殊的控件

目录 一、3个button 1、button 2、linkbutton 3、ImageButton Enabled属性 二、Image控件 1、使用原因 2、使用方式 法一&#xff1a;指明路径 法二&#xff1a;同一目录 3、使用实例 &#xff08;1&#xff09;要求 &#xff08;2&#xff09;操作 三、Typelink和…

SpringBoot自定义Starter:IP计数业务功能开发

🙈作者简介:练习时长两年半的Java up主 🙉个人主页:程序员老茶 🙊 ps:点赞👍是免费的,却可以让写博客的作者开心好久好久😎 📚系列专栏:Java全栈,计算机系列(火速更新中) 💭 格言:种一棵树最好的时间是十年前,其次是现在 🏡动动小手,点个关注不迷路,…

每天学习一个Linux命令之nano

每天学习一个Linux命令之nano 在Linux系统中&#xff0c;有许多文本编辑器可供选择&#xff0c;而nano是其中一款简洁易用的编辑器。本篇博客将详细介绍nano命令及其可用的选项&#xff0c;帮助读者更好地使用这个命令。 Nano命令简介 Nano是一个开源的、易于使用的、基于终…

RocketMq 顺序消费、分区消息、延迟发送消息、Topic、tag分类 实战(基本概念) (一)

1、RocketMq基本概念 Topic 消息主题&#xff0c;一级消息类型&#xff0c;通过Topic对消息进行分类。更多信息&#xff0c;请参见Topic与Tag最佳实践。 消息&#xff08;Message&#xff09; 消息队列中信息传递的载体。 Message ID 消息的全局唯一标识&#xff0c;由云消息队…

对https://registry.npm.taobao.org/tyarn的请求失败,原因:证书过期

今天安装tyarn时&#xff0c;报错如下&#xff1a; request to https://registry.npm.taobao.org/tyarn failed, reason: certificate has expired 原来淘宝镜像过期了&#xff0c;需要重新搞一下 记录一下解决过程&#xff1a; 1.查看当前npm配置 npm config list 2.清空…

持续集成平台 01 jenkins 入门介绍

拓展阅读 Devops-01-devops 是什么&#xff1f; Devops-02-Jpom 简而轻的低侵入式在线构建、自动部署、日常运维、项目监控软件 代码质量管理 SonarQube-01-入门介绍 项目管理平台-01-jira 入门介绍 缺陷跟踪管理系统&#xff0c;为针对缺陷管理、任务追踪和项目管理的商业…

JAVAEE多线程——锁

文章目录 什么是锁为什么需要锁如何加锁synchorized 的使用synchronized 修饰方法synchronized 修饰代码块 死锁问题那种场景会造成死锁死锁的本质由于内部存在无限循环导致的死锁 死锁的第二种情况哲学家吃饭模型造成死锁的必要条件 什么是锁 首先我们来解释一下什么是锁呢&a…

如何利用MySQL建立覆盖原表的索引优化查询性能

MySQL数据库中&#xff0c;建立合适的索引对于提高查询性能至关重要。然而&#xff0c;在某些情况下&#xff0c;我们可能需要进一步优化查询性能&#xff0c;而覆盖索引&#xff08;Covering Index&#xff09;就是一种有效的方法。本文将介绍什么是覆盖索引以及如何在MySQL中…

SpringBoot整合Xxl-Job

一、下载Xxl-Job源代码并导入本地并运行 Github地址:GitHub - xuxueli/xxl-job: A distributed task scheduling framework.&#xff08;分布式任务调度平台XXL-JOB&#xff09; 中文文档地址:分布式任务调度平台XXL-JOB 1.使用Idea或Eclipse导入 2.执行sql脚本(红色标记…

机器学习_神经网络

文章目录 简介反向传播小结 简介 为了构建神经网络模型&#xff0c;我们需要首先思考大脑中的神经网络是怎样的&#xff1f;每一个神经元都可以被认为是一个处理单元/神经核&#xff0c;它含有许多输入/树突&#xff0c;并且有一个输出/轴突。神经网络是大量神经元相互链接并通…

【笔试】互联网校招技术研发岗 非技术岗笔试准备方向

【笔试】互联网校招技术研发岗笔试准备方向 文章目录 1、研发&#xff1a;软件开发&#xff08;选择&#xff09;2、研发&#xff1a;非技术题&#xff08;选择&#xff09;3、研发&#xff1a;编程题4、产品、运营、项目、视觉、设计、交互5、人力、财务、行政、咨询、管理6、…

计算机网络简答题:复试+期末

文章目录 1.计算机网络的功能:2.计算机网络的分类:3.主机间的通信方式:4.电报交换、报文交换、分组交换的区别:5.计算机网络的性能指标:6.0SI模型和TCP/IP模型:7.通信信通的方式:8.端到端的通信与点到点通信的区别:9.同步通信和异步通信:10.频分复用、时分复用、波分复用和码分…

H5 与 App、网页之间的通信

前言 本文整理工作中 H5 嵌入 Android、iOS 与 PC 网页后&#xff0c;如何与各端通信。&#xff08;提供 H5 端的代码&#xff09; 环境判断 const ua navigator.userAgent.toLowerCase()const isAndroid /android/i.test(ua)const isIos /iphone|ipod|ios/i.test(ua)cons…

笔试题——得物春招实习

开幕式排练 题目描述 导演在组织进行大运会开幕式的排练&#xff0c;其中一个环节是需要参演人员围成一个环形。演出人员站成了一圈&#xff0c;出于美观度的考虑&#xff0c;导演不希望某一个演员身边的其他人比他低太多或者高太多。 现在给出n个参演人员的身高&#xff0c;问…

使用Pygame做一个乒乓球游戏(2)使用精灵重构

本节没有添加新的功能&#xff0c;而是将前面的功能使用精灵类(pygame.sprite.Sprite) 重构。 顺便我们使用图片美化了一下程序。 看到之前的代码&#xff0c;你会发现代码有点混乱&#xff0c;很多地方使用了全局变量(global)。 本节我们将使用类进行重构。 Block(Sprite)…

NCV7428D15R2G中文资料PDF数据手册参数引脚图图片价格概述参数芯片特性原理

产品概述&#xff1a; NCV7428 是一款系统基础芯片 (SBC)&#xff0c;集成了汽车电子控制单元 (ECU) 中常见的功能。NCV7428 为应用微控制器和其他负载提供低电压电源并对其进行监控&#xff0c;包括了一个 LIN 收发器。 产品特性&#xff1a; 控制逻辑3.3 V或5 V VOUT电源&…

每天一个数据分析题(二百二十)

在集成学习的GBDT算法中&#xff0c;每次训练新的决策树的目的是( )&#xff1f; A. 预测原始数据的标签 B. 预测上一个模型的残差 C. 降低模型的偏差 D. 降低模型的方差 题目来源于CDA模拟题库 点击此处获取答案

python练习3

用户登录注册案例 while True: print("\t\t\t英雄商城登录界面\n") print("~*"*38) print("\t\t\t1.用户登录\n") print("\t\t\t2.用户注册\n") print("\t\t\t3.退出系统\n") print("~*"*38) choice input("…

Spark-Scala语言实战(4)

在之前的文章中&#xff0c;我们学习了如何在scala中定义无参&#xff0c;带参以及匿名函数。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#xff0c;谢谢。 Spark-Scala语言…