小程序自定义轮播图

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

话不多说，上图上代码。

wxml

<text>{{clubs[0].name}}</text>

</view>

<text>{{clubs[1].name}}</text>

</view>

<text>{{clubs[2].name}}</text>

</view>

<text>{{clubs[3].name}}</text>

</view>

<text>{{clubs[4].name}}</text>

</view>

wxss

.box {

height: 340rpx;

z-index: 0;

margin: 50rpx 0;

}

.box .club {

height: 140rpx;

width: 140rpx;

position: relative;

display: inline-block;

}

.club image {

height: 140rpx;

width: 140rpx;

}

.club text {

display: block;

width: 100%;

font-size: 24rpx;

line-height: 40rpx;

text-align: center;

}

.box .club:nth-child(1) {

transform: scale(0.8, 0.8) translateX(-120rpx);

opacity: 0.2;

z-index: 10;

}

.box .club:nth-child(2) {

transform: scale(1,1) translateX(-80rpx);

opacity: 0.5;

z-index: 100;

}

.box .club:nth-child(3) {

transform: scale(1.4,1.4);

z-index: 1000;

}

.box .club:nth-child(4) {

transform: scale(1,1) translateX(80rpx);

opacity: 0.5;

z-index: 100;

}

.box .club:nth-child(5) {

transform: scale(0.8, 0.8) translateX(120rpx);

opacity: 0.2;

z-index: 10;

}

.box .club:nth-child(1) text,

.box .club:nth-child(2) text,

.box .club:nth-child(4) text,

.box .club:nth-child(5) text{

visibility: hidden;

}

//触摸开始事件

touchstart: function (e) {

console.log(e.touches[0].pageX);

this.data.touchDot = e.touches[0].pageX;

var that = this;

this.data.interval = setInterval(function () {

that.data.time += 1;

}, 100);

//触摸移动事件

touchmove: function (e) {

let touchMove = e.touches[0].pageX;

let touchDot = this.data.touchDot;

let time = this.data.time;

console.log("touchMove: " + touchMove + ", touchDot: " + touchDot + ", diff: " + (touchMove - touchDot));

//向左滑动

if (touchMove - touchDot <= -40 && time < 10 && !this.data.done) {

console.log("向左滑动");

this.data.done = true;

this.scrollLeft();

}

//向右滑动

if (touchMove - touchDot >= 40 && time < 10 && !this.data.done) {

console.log("向右滑动");

this.data.done = true;

this.scrollRight();

}

//触摸结束事件

touchend: function (e) {

clearInterval(this.data.interval);

this.data.time = 0;

this.data.done = false;

}, scrollLeft() {

var animation1 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

var animation2 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

var animation3 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

var animation4 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

var animation5 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

this.animation1 = animation1;

this.animation2 = animation2;

this.animation3 = animation3;

this.animation4 = animation4;

this.animation5 = animation5;

this.animation1.translateX(-60).opacity(0).step();

this.animation2.translateX(-140).opacity(0.5).scale(0.8, 0.8).step();

this.animation3.translateX(-110).opacity(0.5).scale(1, 1).step();

this.animation4.translateX(-70).opacity(1).scale(1.4, 1.4).step();

this.animation5.translateX(-30).opacity(0.5).scale(1, 1).step();

this.setData({

animation1: animation1.export(),

animation2: animation2.export(),

animation3: animation3.export(),

animation4: animation4.export(),

animation5: animation5.export()

})

var that = this;

setTimeout(function () {

that.animation1.translateX(-50).opacity(0.2).scale(0.8, 0.8).step({ duration: 0, timingFunction: 'linear' });

that.animation2.translateX(-40).opacity(0.5).scale(1, 1).step({ duration: 0, timingFunction: 'linear' });

that.animation3.translateX(0).opacity(1).scale(1.4, 1.4).step({ duration: 0, timingFunction: 'linear' });

that.animation4.translateX(40).opacity(0.5).scale(1, 1).step({ duration: 0, timingFunction: 'linear' });

that.animation5.translateX(50).opacity(0.2).scale(0.8, 0.8).step({ duration: 0, timingFunction: 'linear' });

that.setData({

animation1: animation1.export(),

animation2: animation2.export(),

animation3: animation3.export(),

animation4: animation4.export(),

animation5: animation5.export()

})

}.bind(this), 195)

let array = this.data.clubs;

let shift = array.shift();

array.push(shift);

setTimeout(function () {

this.setData({

clubs: array

})

}.bind(this), 195)

//向右滑动事件

scrollRight() {

var animation1 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

var animation2 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

var animation3 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

var animation4 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

var animation5 = wx.createAnimation({

duration: 300,

timingFunction: "linear",

delay: 0

})

this.animation1 = animation1;

this.animation2 = animation2;

this.animation3 = animation3;

this.animation4 = animation4;

this.animation5 = animation5;

this.animation1.translateX(30).opacity(0.5).scale(1, 1).step();

this.animation2.translateX(70).opacity(1).scale(1.4, 1.4).step();

this.animation3.translateX(110).opacity(0.5).scale(1, 1).step();

this.animation4.translateX(120).opacity(0.2).scale(0.8, 0.8).step();

this.animation5.translateX(130).opacity(0).step();

this.setData({

animation1: animation1.export(),

animation2: animation2.export(),

animation3: animation3.export(),

animation4: animation4.export(),

animation5: animation5.export()

})

var that = this;

setTimeout(function () {

that.animation1.translateX(-50).opacity(0.2).scale(0.8, 0.8).step({ duration: 0, timingFunction: 'linear' });

that.animation2.translateX(-40).opacity(0.5).scale(1, 1).step({ duration: 0, timingFunction: 'linear' });

that.animation3.translateX(0).opacity(1).scale(1.4, 1.4).step({ duration: 0, timingFunction: 'linear' });

that.animation4.translateX(40).opacity(0.5).scale(1, 1).step({ duration: 0, timingFunction: 'linear' });

that.animation5.translateX(50).opacity(0.2).scale(0.8, 0.8).step({ duration: 0, timingFunction: 'linear' });

that.setData({

animation1: animation1.export(),

animation2: animation2.export(),

animation3: animation3.export(),

animation4: animation4.export(),

animation5: animation5.export()

})

}.bind(this), 195)

let array = this.data.clubs;

let pop = array.pop();

array.unshift(pop);

setTimeout(function () {

this.setData({

clubs: array

})

}.bind(this), 195)

}

复制完我还有几句话要说，做前端千万不要被框架限制住自己，要做一个有灵魂的工程师。就像这个轮播图千万不要被小程序的swiper所限制。

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

10-27 六六分期app的软件客服如何联系？(六六分期

11-06 可心卡盟:win10系统火狐flash插件崩溃怎么

11-06 亲亲特价:怎么删除回收站图标

11-06 济南大学虚拟社区:鲁大师节能降温的具体办

11-06 xlueops.exe:无线网络安装向导

11-06 女斗合众国:win7系统cf与主机连接不稳定怎

11-06 0xc000022-[cf烟雾头]cf怎么调烟雾头

11-06 qizideyouhuo:应用程序无法正常启动0xc0000

11-06 ipz-185:win7系统vcf文件怎么打开

11-06 傻哥蹦迪:win10系统s4怎么打开usb调试

11-06 八神浩树gtaste:回收站清空了怎么恢复

11-06 妖尾之黑色守护:win10系统电脑没有1440x900

11-06 校园至尊魔王小说:win7系统浏览网页时字体

11-06 女斗合众国:win10系统访问共享文件夹提示请

11-06 tokyo hot n0654:恢复win7系统默认字体一招

11-06 雨酷仙境:设置win7系统转移临时文件夹腾出

11-06 阿穆纳伊之杖:win7系统开始菜单在右边还原

11-06 tunespotting:win10系统火狐flash插件总是

11-06 甘尔葛分析师：计谋网站seo关键词暴涨有什

11-06 蔡贵霖: 计谋网站seo关键词暴涨有什么秘密

11-06 博益网首页:ao3网页版进入不了解决方法

11-06 漏斗子专栏: 网站数据分析小白易懂精华篇

11-06 见证双虹怎么做:win7系统开启telnet命令的

11-06 颾狐蝶蜋:系统资源不足无法完成请求的服务

11-06 国光中学校歌:提交网站到alexa查询详细步骤

11-06 西安有情天:静态网页和动态网页的区别

11-06 红木雅尚斋:外部链接构造对网站的好处

11-06 前官礼遇：防止域名劫持–增强域安全性的10

11-06 密传二转答案: 中文分词算法有哪些

11-06 金泉家园邮编:百度快照劫持的表现及应对方

微信小程序 - 实现简单登录和个人信息页面发布时间：2022-07-18

【微信小程序】---线上环境搭建发布时间：2022-07-18

亲亲特价:怎么删除回收站图标

阅读排行榜

1 亲亲特价:怎么删除回收站图标

今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道

阅读：8196|2022-11-06

客服电话

电子邮件

小程序自定义轮播图

请发表评论

全部评论

上一篇：

下一篇：

亲亲特价:怎么删除回收站图标

亲亲特价:怎么删除回收站图标

关于我们

产品与服务

解决方案

139-2527-9053