微信小程序实现堆叠式轮播

1.实现效果

2.实现原理

1.css的var()函数
var() 函数用于插入自定义属性的值，而不是另一个属性的值的任何部分。
语法：

var(custom-property-name, value)

eg：

:root {--main-bg-color: coral;--main-txt-color: blue; --main-padding: 15px;
}#div1 {background-color: var(--main-bg-color);color: var(--main-txt-color);padding: var(--main-padding);
}#div2 {background-color: var(--main-bg-color);color: var(--main-txt-color);padding: var(--main-padding);
}

2.利用行内样式，区分不同样式

获取每一项的值

style="--index:{{item.zIndex}};--left:{{item.mLeft}}"

设置不同的缩放大小，层级高低，相对居中的位置

 transform: scale(calc(0.5 + var(--index) / 10));margin-left: calc(var(--left) * 100rpx - 150rpx);z-index: var(--index);

3.初始化数据，为数据设置相应的z-index和mleft
4.结合事件：bindtouchmove，bindtouchstart，bindtouchend

小程序事件：

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset,touches。事件的使用方式

事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

冒泡事件列表：

注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件

如何绑定并阻止事件冒泡？
除 bind 外，也可以用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。

3.实现代码

<view class="swiper-box" bindtouchmove="tauchMove" bindtouchstart="tauchStart" bindtouchend="tauchEnd"><view class="item-box {{item.zIndex==1?'none':''}}" wx:for="{{swiperList}}" wx:key="index" style="--index:{{item.zIndex}};--left:{{item.mLeft}}"><view class="swiper-item"><image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image><video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video></view></view>
</view>

/* pages/another/cust-swiper/index.wxss */
page {background-color: #fff;
}.swiper-item image,
.swiper-item video {width: 100%;display: block;height: 100%;margin: 0;pointer-events: none;
}image {max-width: 100%;display: inline-block;position: relative;z-index: 0;
}.swiper-box {height: 420rpx;position: relative;max-width: 750rpx;overflow: hidden;box-sizing: border-box;margin-top: 90rpx;
}.swiper-box .item-box {position: absolute;width: 300rpx;height: 380rpx;top: 0;bottom: 0;left: 50%;margin: auto;transition: all 0.2s ease-in 0s;opacity: 1;box-shadow: 0px 13rpx 12rpx rgba(0, 0, 0, .5);border-radius: 15rpx;overflow: hidden;
}.swiper-box .item-box.none {opacity: 0;
}.swiper-box .item-box .swiper-item {width: 100%;height: 100%;border-radius: 6rpx;overflow: hidden;
}.swiper-box .item-box {transform: scale(calc(0.5 + var(--index) / 10));margin-left: calc(var(--left) * 100rpx - 150rpx);z-index: var(--index);
}

// pages/another/cust-swiper/index.js
Page({data: {swiperList: [{type: 'video',url: 'https://static.51dh.com.cn/dbp/12/98/4494bd8a6e0fcd4a992f25a42bea28f8d1fb.mp4'}, {type: 'image',url: 'https://i.postimg.cc/mgsKJGLw/susu1.jpg'}, {type: 'image',url: 'https://i.postimg.cc/qRRLS16Q/susu0.jpg',}, {type: 'image',url: 'https://i.postimg.cc/pXDp6RXq/susu3.jpg'}, {type: 'image',url: 'https://i.postimg.cc/XJmpTvCD/susu2.jpg'}, {type: 'image',url: 'https://i.postimg.cc/76br1jzJ/susu1.jpg'}, {type: 'image',url: 'https://i.postimg.cc/pXDp6RXq/susu3.jpg'},{type: 'image',url: 'https://i.postimg.cc/XJmpTvCD/susu2.jpg'},],},onLoad: function (options) {this.tauchSwiper('swiperList');},onShow: function () {},// 初始化tauchSwipertauchSwiper(name) {let list = this.data[name];for (let i = 0; i < list.length; i++) {// Math.abs(x) 函数返回指定数字 “x“ 的绝对值list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))list[i].mLeft = i - parseInt(list.length / 2)}this.setData({swiperList: list})},// tauchSwiper触摸开始tauchStart(e) {this.setData({tauchStart: e.touches[0].pageX})},// tauchSwiper计算方向tauchMove(e) {this.setData({direction: e.touches[0].pageX - this.data.tauchStart > 0 ? 'right' : 'left'})},// tauchSwiper计算滚动tauchEnd(e) {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 < list.length; i++) {list[i - 1].mLeft = list[i].mLeftlist[i - 1].zIndex = list[i].zIndex}list[list.length - 1].mLeft = mLeft;list[list.length - 1].zIndex = zIndex;this.setData({swiperList: list})} 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({swiperList: list})}}
})

4.写在最后

微信小程序实现堆叠式轮播相关推荐

微信小程序最简单的轮播图
小程序轮播图今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码基本属性介绍 <!-- indic ...
微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
php 小程序轮播图,微信小程序swiper组件构建轮播图代码分享
本文主要和大家介绍微信小程序 swiper组件构建轮播图的实例的相关资料,如有疑问请留言或者到本站社区交流讨论,需要的朋友可以参考下,希望能帮助到大家. 微信小程序 swiper组件构建轮播图的实例 ...
【微信小程序】实现简单轮播图效果
微信小程序实现轮播图效果轮播图实现效果:(可循环播放) 代码实现:(复制可用) index.wxml: <view class="swiper"><swiper ...
微信小程序五（创建轮播图）
应用中最常见的就是轮播图了,今儿个就讲讲微信小程序中轮播图的使用轮播图,不外乎俩个要素,跳转链接和图片地址 1. 设置数据我在 pages/test/test.js中添加如下数据 //test ...
android分享小程序缩略图,微信小程序实现带缩略图轮播效果
本文实例为大家分享了微信小程序实现实现轮播效果展示的具体代码,供大家参考,具体内容如下 wxml: {{item.index+1}} wxss: /* pages/shouye/shouye.wxss ...
【微信小程序】实现广告轮播图
文章目录一.示例代码二.展示优化 1.衔接滑动 2.居中显示 3.图片完整 4.图片标题三.指示点优化 1.样式优化 2.特效优化四.所有代码五.参考博文六.视频图片混播最终效果图一. ...
七、微信小程序-快速回顾 ( swiper 轮播图、scroll-view 可滚动视图区域 )
文章目录一.swiper 轮播图 1.1. swiper 基本使用 1.2. 调整轮播图和图片的大小二.scroll-view 可滚动视图区域一.swiper 轮播图轮播图是项目中最常见的功能 ...
微信小程序轮播中的current_微信小程序开发之自定义轮播图实例
轮播图是大部分应用的一个常用的功能,常用于广告投放.产品展示.活动展示等等. 漂亮的轮播图效果可以吸引用户的点击,达到推广产品的作用. 废话少说,下面开始动手. 业务需求: 5个图片轮番播放,可以左右 ...

微信小程序实现堆叠式轮播

1.实现效果

2.实现原理

3.实现代码

4.写在最后

微信小程序实现堆叠式轮播相关推荐

最新文章

热门文章

微信小程序实现堆叠式轮播

1.实现效果

2.实现原理

3.实现代码

4.写在最后 insertAdIfNeeded();

微信小程序实现堆叠式轮播相关推荐

最新文章

热门文章

4.写在最后