微信小程序之实现层叠轮播图的效果案例（前端学习收藏夹必备）

效果展示

代码展示：
WXML代码

<view class="selection_cards" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend"><view class="selection_cards_item" wx:for="{{list}}" wx:key="index"style="left:{{item.style.left}}px; z-index:{{item.style.zIndex}};transform:{{item.style.transform}};opacity:{{item.style.opacity}};transition:{{!isTouch?'0.1s':0}};background-image: url({{item.backimage}});"></view>
</view>

WXSS代码

/*css*/
.selection_cards{width: 100%;height: 400rpx;position: relative;margin-top: 200px;z-index: 99;
}.selection_cards_item{width: 194rpx;/*188*/height:350rpx;/*340*/background-size: 100%;/* overflow: hidden; */border-radius: 16rpx;position: absolute;top: 0;color: white;font-size: 100rpx;box-sizing: border-box;
}

JS代码

Page({data: {cardNumber: 7, indexArr: [-3, -2, -1, 0, 1, 2, 3], list: [], listArr: [],startPageX: 0,cardWidth: 0, screenWidth: 0, isTouch: false, },onLoad() {let _this = this;_this.init();},/*层叠轮播图初始化*/init: function () {let _this = this;wx.getSystemInfo({success(res) {//获取屏幕的宽成功let arr = [];let len = _this.data.cardNumber;let cardWidth = res.screenWidth / 750 * 194;for (let i = 0; i < len; i++) {let item = {option: 0, //自定义选项left: (i * (cardWidth / 2)),scale: (3 - Math.abs(_this.data.indexArr[i])) * 0.4,zIndex: 3 - Math.abs(_this.data.indexArr[i]),style: {left: (i * (cardWidth / 2)),transition: 0,zIndex: 3 - Math.abs(_this.data.indexArr[i]),transform: "scale(" + ((3 - Math.abs(_this.data.indexArr[i])) * 0.4) + ")",opacity: (3 - Math.abs(_this.data.indexArr[i]) != 0) ? 1 : 0},backimage:"",}item.option = i;arr.push(item);}arr[0].backimage="https://ww2.sinaimg.cn/bmiddle/005SWChdly1g5q9gkj0nhj30u01rc167.jpg"arr[1].backimage="https://ww3.sinaimg.cn/bmiddle/005SWChdly1g5q9gk2lrjj30u01rcna4.jpg"arr[2].backimage="https://ww3.sinaimg.cn/bmiddle/005SWChdly1g5q9gjq3dij30u01rc14p.jpg"arr[3].backimage="https://ww2.sinaimg.cn/bmiddle/005SWChdly1g5q9ginahaj30u01rc49y.jpg"arr[4].backimage="https://ww4.sinaimg.cn/bmiddle/005SWChdly1g5q9gi6alkj30u01rc14q.jpg"arr[5].backimage="https://ww3.sinaimg.cn/bmiddle/005SWChdly1g5q9gho9hzj30u01rcalv.jpg"arr[6].backimage="https://ww3.sinaimg.cn/bmiddle/005SWChdly1g5q9ghakxfj30u01rcds3.jpg"console.log(arr);_this.setData({screenWidth: res.screenWidth,cardWidth,list: arr,listArr: arr})}})},/*触摸开始*/touchstart(e) {//console.log(e.changedTouches[0].pageX);this.setData({startPageX: e.changedTouches[0].pageX,isTouch: true //开始触摸});},/*触摸移动*/touchmove(e) {let _this = this;let pageX = e.changedTouches[0].pageX;let move = pageX - _this.data.startPageX; //正数，向右滑动；负数，向左滑动let list = JSON.parse(JSON.stringify(_this.data.list));let len = list.length;//console.log(move);if (move > 0) { //向右滑for (let i = 0; i < len; i++) {list[i].style.left = list[i].left + ((move) * 0.52);if (_this.data.indexArr[i] < 0) {list[i].style.transform = "scale(" + (list[i].scale + (move * 0.005)) + ")";list[i].style.zIndex = list[i].zIndex + 1;if (_this.data.indexArr[i] >= -3) {list[i].style.opacity = 1; }} else {list[i].style.transform = "scale(" + (list[i].scale - (move * 0.005)) + ")";list[i].style.zIndex = list[i].zIndex - 1;if (_this.data.indexArr[i] >= 2) {list[i].style.opacity = 0;}}}//检查是否，向右if (list[2].style.left >= list[3].left) {let newArr = [];for (let i = 0; i < len; i++) {let index = i; //当前将要变成哪一个坐标元素的位置if (i + 1 != len) {index = i + 1;} else {//最后一个元素到第一个元素的位置index = 0;}let current_option = list[i].option;// console.log('current_option',current_option);// console.log('list[i].option',list[i].option);let item = _this.data.listArr[index];item.option = current_option;item.backimage=list[i].backimagenewArr[index] = item;}// console.log('old', list);// console.log('new', newArr);list = newArr;_this.setData({startPageX: pageX});}_this.setData({list})} else { //向左滑for (let i = 0; i < len; i++) {list[i].style.left = list[i].left + ((move) * 0.52);if (_this.data.indexArr[i] <= 0) {list[i].style.transform = "scale(" + (list[i].scale - Math.abs(move * 0.005)) + ")";list[i].style.zIndex = list[i].zIndex - 1;if (_this.data.indexArr[i] <= -2) {list[i].style.opacity = 0; }} else {list[i].style.transform = "scale(" + (list[i].scale + Math.abs(move * 0.005)) + ")";list[i].style.zIndex = list[i].zIndex + 1;if (_this.data.indexArr[i] >= 2) {list[i].style.opacity = 1;}}}//检查，向左if (list[3].style.left <= list[2].left) {let newArr = [];for (let i = 0; i < len; i++) {let index = i;if (i == 0) {index = len - 1;} else {index = i - 1;}let current_option = list[i].option;// console.log('current_option',current_option);// console.log('list[i].option',list[i].option);let item = _this.data.listArr[index];item.option = current_option;item.backimage=list[i].backimagenewArr[index] = item;}// console.log('old', list);// console.log('new', newArr);list = newArr;_this.setData({startPageX: pageX});}_this.setData({list})}},/*触摸结束*/touchend(e) {console.log('触摸结束');let _this = this;let list = JSON.parse(JSON.stringify(_this.data.list));let len = list.length;_this.setData({isTouch: false //关闭触摸})if (list[2].style.left >= list[3].left||list[3].style.left <= list[2].left) {//console.log('翻牌了');} else {//移动的距离不够for (let i = 0; i < len; i++) {list[i].style.left = list[i].left;list[i].style.zIndex = list[i].zIndex;list[i].style.transform = "scale(" + list[i].scale + ")";list[i].style.opacity = (3 - Math.abs(_this.data.indexArr[i]) != 0) ? 1 : 0}_this.setData({list})}}
})

微信小程序之实现层叠轮播图的效果案例（前端学习收藏夹必备）相关推荐

微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
php 小程序轮播图,微信小程序swiper组件构建轮播图代码分享
本文主要和大家介绍微信小程序 swiper组件构建轮播图的实例的相关资料,如有疑问请留言或者到本站社区交流讨论,需要的朋友可以参考下,希望能帮助到大家. 微信小程序 swiper组件构建轮播图的实例 ...
【微信小程序】实现简单轮播图效果
微信小程序实现轮播图效果轮播图实现效果:(可循环播放) 代码实现:(复制可用) index.wxml: <view class="swiper"><swiper ...
【云开发】10分钟零基础学会做一个快递查询微信小程序，快速掌握微信小程序开发技能（轮播图、API请求）
大家好,我叫小秃僧这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
【微信小程序】好看的轮播图组件
微信小程序好看的轮播图组件效果示例使用步骤第一步: 新建components文件夹第二步: 按照以下目录创建文件:(文件名可以自定义,但后面引入组件时应保持前后一致) 第三步: 各个文件的代码: ...
微信小程序最简单的轮播图
小程序轮播图今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码基本属性介绍 <!-- indic ...
微信小程序五（创建轮播图）
应用中最常见的就是轮播图了,今儿个就讲讲微信小程序中轮播图的使用轮播图,不外乎俩个要素,跳转链接和图片地址 1. 设置数据我在 pages/test/test.js中添加如下数据 //test ...
用uni-app开发的微信小程序轮播图----和用微信小程序原生开发的轮播图
话不多说,附赠代码以下是用uni-app开发的轮播图 <template><view class="recommend"><view class=& ...
【微信小程序】实现广告轮播图
文章目录一.示例代码二.展示优化 1.衔接滑动 2.居中显示 3.图片完整 4.图片标题三.指示点优化 1.样式优化 2.特效优化四.所有代码五.参考博文六.视频图片混播最终效果图一. ...

微信小程序之实现层叠轮播图的效果案例（前端学习收藏夹必备）

微信小程序之实现层叠轮播图的效果案例（前端学习收藏夹必备）相关推荐

最新文章

热门文章