小程序自定义轮播图


话不多说，上图上代码。

wxml

<view style="white-space: nowrap;" class="box" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend">

<view class="club" animation="{{animation1}}" bindtap="scrollLeft">

<image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"/>

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

</view>

<view class="club" animation="{{animation2}}" bindtap="scrollLeft">

<image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"/>

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

</view>

<view class="club" animation="{{animation3}}">

<image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"/>

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

</view>

<view class="club" animation="{{animation4}}" bindtap="scrollRight">

<image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"/>

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

</view>

<view class="club" animation="{{animation5}}" bindtap="scrollRight">

<image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"/>

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

</view>

</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;

}

js

//触摸开始事件

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所限制。

时间： 2024-08-27 07:54:51

小程序自定义轮播图的相关文章

微信小程序的轮播图swiper问题

微信小程序的轮播图swiper,调用后,怎样覆盖系统的 点,达到自己想要的效果 不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class="section section_gap swiper"> <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}

如何自定义微信小程序swiper轮播图面板指示点的样式

https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组件的面板指示点的样式呢?最近在使用swiper的时候也在想这个,最后发现在调试的时候,可以看到他的选择器.如图: <swiper class="swiper-box" indicator-

自定义微信小程序swiper轮播图面板指示点的样式

微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组件的面板指示点的样式呢?最近在使用swiper的时候也在想这个,最后发现在调试的时候,可以看到他的选择器.如图: 1 2 3 4 5 6 7 8 9 <swiper class="swiper-box" indicator-dots="{{ indicatordots }}

小程序--swiper轮播图组件

效果图展示: 先了解下swiper组件参数配置 轮播实现的具体步骤如下: 第一步:添加图片素材,我这边是放到images下,文件以及图片名字自定义即可. 第二步:在wxml中进行页面布局 在这里呢,用到了列表渲染.swiper组件,三元运算符(注:由于小程序不能操作dom,三元运算符还有一个常用的使用场景是控件class样式输出,达到jQuery.addClass()的效果) <view class="swiper-container"> <swiper autopl

微信小程序之轮播图

今天记录一下微信小程序开发时,轮播图的效果时怎么实现的.话不多说,直接上代码: <!-- 1. 首页轮播图 --> <view> <swiper class="my-swiper" autoplay="true" indicator-dots="true" indicator-active-color="#fff" circular="true"> <block w

小程序切换轮播图显示空白的问题

技术栈,taro编译的小程序,场景: 首页几个tab切换,默认第一个tab轮播图有数据,切换的时候后面的轮播图有的时候显示空白,请看: 首先父组件到子组件的值传过来了,自组件img src路径也有值,复制出来地址浏览器,显示没问题,路径问题排除 第一个tab三张轮播图,第二个两张轮播图,其他的tab都是一张,每个tab都从 数组形式传值过来的.有数据这是怎么回事,于是翻翻小郑许官网看到这 https://developers.weixin.qq.com/miniprogram/dev/compo

小程序之轮播图（2020.4.13更新）

wxml <!-- 轮播图 --> <view class='carousel'> <swiper class='carousel_swiper' indicator-dots="true" indicator-color="#f4f4f4" indicator-active-color="#4eb8b8" autoplay="true" interval='5000' circular='tru

小程序-广告轮播/控制属性

[转]小程序-广告轮播/控制属性 微信小程序广告轮播元素<swiper></swiper>  图片所在元素<swiper-item>/swiper-item> 其中属性有: autoplay:true,//是否自动播放 autoplaytxt:"停止自动播放", indicatorDots: true,//指示点 // indicator-color:"white",//指示点颜色 暂未启动 // indicator-act

CSS-用伪类制作小箭头（轮播图的左右切换btn）

先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代替,而是用纯css制作. 第一个是left按钮,即prev: .vmc-arrow-left:after { content: "\e079"; } 第二个是right按钮的,也就是next下一张的按钮: .vmc-arrow-right:after { content: "\e