原生小程序翻页效果轮播图
Posted zfyan-1992
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生小程序翻页效果轮播图相关的知识，希望对你有一定的参考价值。
废话不多说，直接上代码：
<view class=‘video-box‘>
<view class="box" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend"
>
<view class="item item0 club" animation="{{animation1}}" style=‘z-index:{{zindex[0]}};opacity:{{opacities[0]}};‘>
<image style=‘width:{{imgWidth}}‘ src=‘{{movies[0].url}}‘></image>
<view class=‘sty_1‘>
<view class=‘sty_2‘>{{movies[0].title}}</view>
<view class=‘sty_3‘>{{movies[0].str_1}}</view>
<view class=‘sty_3‘>{{movies[0].str_2}}</view>
</view>
</view>
<view class=" item item1 club" animation="{{animation2}}" style=‘z-index:{{zindex[1]}};opacity:{{opacities[1]}};‘>
<image style=‘width:{{imgWidth}}‘ src=‘{{movies[1].url}}‘></image>
<view class=‘sty_1‘>
<view class=‘sty_2‘>{{movies[1].title}}</view>
<view class=‘sty_3‘>{{movies[1].str_1}}</view>
<view class=‘sty_3‘>{{movies[1].str_2}}</view>
</view>
</view>
<view class="item item2 club" animation="{{animation3}}" style=‘z-index:{{zindex[2]}};opacity:{{opacities[2]}};‘>
<image style=‘width:{{imgWidth}}‘ src=‘{{movies[2].url}}‘></image>
<view class=‘sty_1‘>
<view class=‘sty_2‘>{{movies[2].title}}</view>
<view class=‘sty_3‘>{{movies[2].str_1}}</view>
<view class=‘sty_3‘>{{movies[2].str_2}}</view>
</view>
</view>
<view class="item item3 club" animation="{{animation4}}" style=‘z-index:{{zindex[3]}};opacity:{{opacities[3]}};‘>
<image style=‘width:{{imgWidth}}‘ src=‘{{movies[3].url}}‘></image>
<view class=‘sty_1‘>
<view class=‘sty_2‘>{{movies[3].title}}</view>
<view class=‘sty_3‘>{{movies[3].str_1}}</view>
<view class=‘sty_3‘>{{movies[3].str_2}}</view>
</view>
</view>
<view class=‘btn_l‘>
<view class=‘btnz‘ bindtap="goPre">
<image src=‘../../images/[email protected]‘></image>
</view>
</view>
<view class=‘btn_r‘>
<view class=‘btny‘ bindtap="goNext">
<image src=‘../../images/[email protected]‘></image>
</view>
</view>
</view>
movies:[
{
url:‘http:***.png‘,
title: ‘title1‘,
str_1: ‘string1‘,
str_2: ‘‘
},
{
url:‘http:***.png‘,
title: ‘title2‘,
str_1: ‘string1‘,
str_2: ‘string2‘
},
{
url:‘http:***.png‘,
title: ‘title3‘,
str_1: ‘string1‘,
str_2: ‘string2‘
},
{
url:‘http:***.png‘,
title: ‘title4‘,
str_1: ‘string1‘,
str_2: ‘string2‘
}
],
animation1:‘‘,
animation2:‘‘,
animation3:‘‘,
animation4:‘‘,
animations: [],
touchDot: ‘‘,
done: false,
time: 0,
container: [], //记录当前5个位置为哪5个item，理解为5个容器
curPos: 2, //记录当前显示位置是第几个容器（从0开始）
zindex: [0, 10, 100, 10], //与container中的对应
curIndex: 1,//从显示位置的item在clubs中的index
postions: [0, 1, 2, 3],//container中4个容器所在位置
opacities: [0, 0.8, 1, 0.8],
//function:
onLoad: function (options) {
//test----------
this.setPos(2,1)
//初始化到正确的位置
var animation1 = wx.createAnimation({
duration: 500,
timingFunction: "ease",
delay: 0
})
var animation2 = wx.createAnimation({
duration: 500,
timingFunction: "ease",
delay: 0
})
var animation3 = wx.createAnimation({
duration: 500,
timingFunction: "ease",
delay: 0
})
var animation4 = wx.createAnimation({
duration: 500,
timingFunction: "ease",
delay: 0
})
this.animation1 = animation1;
this.animation2 = animation2;
this.animation3 = animation3;
this.animation4 = animation4;
this.animation1.translateX(‘0%‘).opacity(0).scale(0).step();
this.animation2.translateX(‘-125%‘).opacity(0.4).scale(0.8).step();
this.animation3.translateX(‘-200%‘).opacity(1).scale(1).step();
this.animation4.translateX(‘-275%‘).opacity(0.4).scale(0.8).step();
this.setData({
animation1: animation1.export(),
animation2: animation2.export(),
animation3: animation3.export(),
animation4: animation4.export(),
})
},
setPos: function (pos, index) {
// POS CONTAINER AREA;INDEX movies INDEX
let container = [];
let p2 = pos;
let p1 = this.findPrePos(p2);
let p0 = this.findPrePos(p1);
let p3 = this.findNextPos(p2);
let i2 = index;
let i1 = this.findPreIndex(i2);
let i0 = this.findPreIndex(i1);
let i3 = this.findNextIndex(i2);
container[p0] = this.data.movies[i0];
container[p1] = this.data.movies[i1];
container[p2] = this.data.movies[i2];
container[p3] = this.data.movies[i3];
this.setData({
container: container
})
},
/**
* container中的位置
*/
findNextPos: function (pos) {
if (pos != 3) {
return pos + 1;
}
return 0;
},
findPrePos: function (pos) {
if (pos != 0) {
return pos - 1;
}
return 3;
},
findNextIndex(index) {
if (index != this.data.movies.length - 1) {
return index + 1;
}
return 0;
},
findPreIndex(index) {
if (index != 0) {
return index - 1;
}
return this.data.movies.length - 1;
},
findNewDistance(newPos, index) {
let newDistances = [];
switch (newPos) {
case 0:
newDistances = [0 - 100 * index + ‘%‘, 0, 0];
break;
case 1:
newDistances = [-25 - 100 * index + ‘%‘, 0.4, 0.8];
break;
case 2:
newDistances = [0 - 100 * index + ‘%‘, 1, 1];
break;
case 3:
newDistances = [25 - 100 * index + ‘%‘, 0.4, 0.8];
break;
}
return newDistances;
},
setNewZindex(newPos) {
let zindexes = [];
zindexes[newPos] = 100;
let nextPos = this.findNextPos(newPos);
zindexes[nextPos] = 10;
let nnextPos = this.findNextPos(nextPos);
zindexes[nnextPos] = 0;
let prePos = this.findPrePos(newPos);
zindexes[prePos] = 10;
let pprePos = this.findPrePos(prePos);
zindexes[pprePos] = 0;
this.setData({
zindex: zindexes
})
},
goPre:function(){
let container = this.data.container;
let oldPos = this.data.curPos;
let newPos = oldPos == 0 ? 3 : oldPos - 1;
let newIndex = this.findPreIndex(this.data.curIndex);
//先滑动，再赋值
var animation1 = wx.createAnimation({
duration: 500,
timingFunction: "ease",
delay: 0
})
var animation2 = wx.createAnimation({
duration: 500,
timingFunction: "ease",
delay: 0
})
var animation3 = wx.createAnimation({
duration: 500,
timingFunction: "ease",
delay: 0
})
var animation4 = wx.createAnimation({
duration: 500,
timingFunction: "ease",
delay: 0
})
this.animation1 = animation1;
this.animation2 = animation2;
this.animation3 = animation3;
this.animation4 = animation4;
let distances = [];
let newPostions = [];
let newOpacities = [];
//用新位置找位移量
for (let i = 0; i < container.length; i++) {
let newPos = this.findNextPos(this.data.postions[i]);
let distance = this.findNewDistance(newPos, i);
distances.push(distance);
newPostions.push(newPos);
newOpacities.push(distance[1]);
}
this.animation1.translateX(distances[0][0]).opacity(distances[0][1]).scale(distances[0][2]).step();
this.animation2.translateX(distances[1][0]).opacity(distances[1][1]).scale(distances[1][2]).step();
this.animation3.translateX(distances[2][0]).opacity(distances[2][1]).scale(distances[2][2]).step();
this.animation4.translateX(distances[3][0]).opacity(distances[3][1]).scale(distances[3][2]).step();
this.setData({
opacities: newOpacities,
postions: newPostions,
animation1: animation1.export(),
animation2: animation2.export(),
animation3: animation3.export(),
animation4: animation4.export(),
})
//赋值
this.setPos(newPos, newIndex)
this.setNewZindex(newPos)
this.setData({
curPos: newPos,
curIndex: newIndex,
})
},
goNext:function(){
let container = this.data.container;
let oldPos = this.data.curPos;
let newPos = oldPos==3?0:oldPos+1;
let newIndex = this.findNextIndex(this.data.curIndex);
var animation1 = wx.createAnimation({
duration: 500,
timingFunction: "ease",
delay: 0
})
var animation2 = wx.createAnimation({
duration: 500,
timingFunction: "ease",
delay: 0
})
var animation3 = wx.createAnimation({
duration: 500,
timingFunction: "ease",
delay: 0
})
var animation4 = wx.createAnimation({
duration: 500,
timingFunction: "ease",
delay: 0
})
this.animation1 = animation1;
this.animation2 = animation2;
this.animation3 = animation3;
this.animation4 = animation4;
let distances = [];
let newPostions = [];
let newOpacities = [];
//用新位置找位移量
for (let i = 0; i < container.length; i++) {
let newPos = this.findPrePos(this.data.postions[i]);
let distance = this.findNewDistance(newPos, i);
distances.push(distance);
newPostions.push(newPos);
newOpacities.push(distance[1]);
}
this.animation1.translateX(distances[0][0]).opacity(distances[0][1]).scale(distances[0][2]).step();
this.animation2.translateX(distances[1][0]).opacity(distances[1][1]).scale(distances[1][2]).step();
this.animation3.translateX(distances[2][0]).opacity(distances[2][1]).scale(distances[2][2]).step();
this.animation4.translateX(distances[3][0]).opacity(distances[3][1]).scale(distances[3][2]).step();
this.setData({
opacities: newOpacities,
postions: newPostions,
animation1: animation1.export(),
animation2: animation2.export(),
animation3: animation3.export(),
animation4: animation4.export(),
})
//赋值
this.setPos(newPos, newIndex)
this.setNewZindex(newPos)
this.setData({
curPos: newPos,
curIndex: newIndex,
})
},
//触摸开始事件
touchstart: function (e) {
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;
//向左滑动
if (touchMove - touchDot <= -40 && time < 10 && !this.data.done) {
this.data.done = true;
this.goNext();
}
//向右滑动
if (touchMove - touchDot >= 40 && time < 10 && !this.data.done) {
this.data.done = true;
this.goPre();
}
},
//触摸结束事件
touchend: function (e) {
clearInterval(this.data.interval);
this.data.time = 0;
this.data.done = false;
},
以上是关于原生小程序翻页效果轮播图的主要内容，如果未能解决你的问题，请参考以下文章