方式一:叠式轮播图
代码实现 js
/**
* 8月初写的了。。代码都没啥印象了,刚刚打开,发现位置是写死了的7个,不过可以动态去设置。。
* 整体来说也不复杂,7个位置,相当于是7个状态,各个状态之间轮换,以下的列表都是从左往右的,最中间的也是界面当前正中间的。
* 用currentIndex这个变量来控制当前翻页情况,也就是本来的7个位置处于什么状态。
*/
// 位置列表
const posOrgArray = [-360, -240, -120, 0, 120, 240, 360]
let posArray = [-360, -240, -120, 0, 120, 240, 360]
// 缩放列表
let scaArray = [.8, .8, .9, 1, .9, .8, .8]
// 透明度列表
let opaArray = [0, 1, 1, 1, 1, 1, 0]
// 高度列表
let indArray = [1, 2, 3, 4, 3, 2, 1]
// 当前位置列表
let curPosArray = [-360, -240, -120, 0, 120, 240, 360]
// 当前缩放列表
let curScaArray = []
// 当前透明度列表
let curOpaArray = []
// 当前高度列表
let curIndArray = []
let left = 0
// 是否可点击,控制点击频率
let canClick = true
// px和rpx转换比例,用于横向滑动的时候计算滑动距离(rpx)
let screenRate = 1
Page({
data: {
// 背景图列表
imgArray: ["imgs/image1.png", "imgs/image2.png", "imgs/image3.png", "imgs/image4.png", "imgs/image5.png", "imgs/image6.png", "imgs/image7.png"],
// 文字列表,和前面的图位置对应
textArray: ["页面1", "页面2", "页面3", "页面4", "页面5", "页面6", "页面7"],
animation: [],
// 当前位置,这个。。和默认位置有关,不要随便改哦。
currentIndex: 7,
// index高度数组,中间的最高嘛~ 因为wxml里用style控制,所以写到了 data 里
indexArray: [1, 2, 3, 4, 3, 2, 1],
// 指示点数组(哈哈哈,写在了这里,没加上去)
indicatorArray: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
wx.getSystemInfo({
success: (res) => {
// 750除以屏幕宽度,得到转换比。因为API用的和得到的大部分的单位都是px,所以还是要转一下
screenRate = 750 / res.screenWidth
}
})
// 初始化动画,注意这个数组和 this.data.animation不是同一个,而是一一对应的关系
this.animation = []
for (let i = 0; i < 7; i++) {
let animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease-out',
})
this.animation.push(animation)
}
console.log('this.animation')
console.log(this.animation)
},
tapItemFn(e) {
console.log(e.currentTarget.dataset.text)
},
touchstart(e) {
left = e.touches[0].pageX
},
touchmove(e) {
// console.log(e)
// 频率控制,一次移动完成后,才能进行下一次
if (this.isMove) {
return
}
let moveLength = (e.touches[0].pageX - left) * screenRate
moveLength = moveLength > 60 ? 60 : moveLength
moveLength = moveLength < -60 ? -60 : moveLength
let rate = moveLength / 60
if (rate == 1) { //从右往左滑
this.isMove = true
this.tapRight()
} else if (rate == -1) { //从左往右滑
this.isMove = true
this.tapLeft()
}
},
touchend(e) {
setTimeout(() => {
this.isMove = false
}, 500)
},
// 往左移
tapLeft() {
if (!canClick) {
return
}
canClick = false
setTimeout(() => {
canClick = true
}, 500)
// 界面往左移,效果相当于数组向右移一位。比如,本来在位置2,向左移,就是2的位置去了1,也就是位置1的参数给到了位置2。。以此类推
console.log('posArray')
console.log(posArray)
curPosArray = this.rollRight(posArray, 1)
console.log(curPosArray)
console.log('scaArray')
console.log(scaArray)
curScaArray = this.rollRight(scaArray, 1)
console.log(scaArray)
console.log('opaArray')
console.log(opaArray)
curOpaArray = this.rollRight(opaArray, 1)
console.log(opaArray)
console.log('indArray')
console.log(indArray)
curIndArray = this.rollRight(indArray, 1)
console.log(indArray)
let animation = this.data.animation
console.log('this.data.animation')
console.log(this.data.animation)
for (let j = 0; j < 7; j++) {
this.animation[j].scale(curScaArray[j], curScaArray[j]).left(curPosArray[j] + 'rpx').opacity(curOpaArray[j]).step()
animation[j] = this.animation[j].export()
}
console.log(this.data.currentIndex)
let currentIndex = ++this.data.currentIndex == 70 ? 0 : this.data.currentIndex
console.log(currentIndex)
this.setData({
animation: animation,
currentIndex: currentIndex,
indexArray: curIndArray
})
},
tapRight() {
if (!canClick) {
return
}
canClick = false
setTimeout(() => {
canClick = true
}, 500)
curPosArray = this.rollLeft(posArray, 1)
curScaArray = this.rollLeft(scaArray, 1)
curOpaArray = this.rollLeft(opaArray, 1)
curIndArray = this.rollLeft(indArray, 1)
let animation = this.data.animation
for (let j = 0; j < 7; j++) {
this.animation[j].scale(curScaArray[j], curScaArray[j]).left(curPosArray[j] + 'rpx').opacity(curOpaArray[j]).step()
animation[j] = this.animation[j].export()
}
let currentIndex = --this.data.currentIndex == 0 ? 70 : this.data.currentIndex
this.setData({
animation: animation,
currentIndex: currentIndex,
indexArray: curIndArray
})
},
/**
* 把数组参数往左移,第一个参数是要改变的数组,第二个参数是移动的次数
* 保存位置0的,然后将数组整体左移,再把之前保存的位置0的值,赋值给数组末尾,下面的rollRight刚好反过来
*/
rollLeft: function(array, times) {
for (let time = 0; time < times; time++) {
let length = array.length - 1
let temp = array[0]
for (let i = 0; i < length; i++) {
array[i] = array[i + 1]
}
array[length] = temp
}
return array.concat()
},
rollRight: function(array, times) {
for (let time = 0; time < times; time++) {
let length = array.length - 1
let temp = array[length]
for (let i = length; i > 0; i--) {
array[i] = array[i - 1]
}
array[0] = temp
}
return array.concat()
}
})
json
{
"navigationBarTitleText": "轮播图测试",
"disableScroll": true
}
wxml
<view class="swiper-page" bindtouchmove="touchmove" bindtouchstart="touchstart" bindtouchend="touchend">
<view wx:for="{{7}}" wx:key="index" class="swiper-container">
<view class="item-container" style="z-index:{{indexArray[index]}}">
<view class="item{{index}} item-common" animation="{{animation[index]}}" bindtap="tapItemFn" data-text="{{textArray[index]}}">
<image class="background" src="{{imgArray[index]}}" mode='aspectFit'></image>
<text class="item-text">{{textArray[index]}}</text>
</view>
</view>
</view>
<button bindtap="tapLeft" style="position:absolute;top:0;left:20rpx">往左滑</button>
<button bindtap="tapRight" style="position:absolute;top:0;right:20rpx">往右滑</button>
</view>
wxss
page {
width: 100%;
height: 100%;
}
.swiper-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
/* border: 1rpx solid #000; */
box-sizing: border-box;
}
.swiper-container {
position: absolute;
left: 375rpx;
/* border: 1rpx solid #000; */
box-sizing: border-box;
}
.item-common {
position: absolute;
}
.background {
width: 210rpx;
height: 270rpx;
vertical-align: top;
box-shadow: 0rpx 0rpx 15rpx rgba(0, 0, 0, 0.5);
}
.item-text {
position: absolute;
top: 180rpx;
left: 0rpx;
width: 100%;
color: white;
font-size: 30rpx;
text-align: center;
/* border: 1rpx solid #000; */
box-sizing: border-box;
}
.item-container {
left: -105rpx;
position: absolute;
/* border: 1rpx solid #000; */
box-sizing: border-box;
}
.item0 {
left: -360rpx;
transform: scale(0.8, 0.8);
opacity: 0;
/* border: 1rpx solid blue;
box-sizing: border-box; */
}
.item1 {
left: -240rpx;
transform: scale(0.8, 0.8);
opacity: 1;
/* border: 1rpx solid green;
box-sizing: border-box; */
}
.item2 {
left: -120rpx;
transform: scale(0.9, 0.9);
opacity: 1;
/* border: 1rpx solid red;
box-sizing: border-box; */
}
.item3 {
left: 0rpx;
transform: scale(1, 1);
opacity: 1;
/* border: 1rpx solid yellow;
box-sizing: border-box; */
}
.item4 {
left: 120rpx;
transform: scale(0.9, 0.9);
opacity: 1;
/* border: 1rpx solid pink;
box-sizing: border-box; */
}
.item5 {
left: 240rpx;
transform: scale(0.8, 0.8);
opacity: 1;
/* border: 1rpx solid sienna;
box-sizing: border-box; */
}
.item6 {
left: 360rpx;
transform: scale(0.8, 0.8);
opacity: 0;
/* border: 1rpx solid slategrey;
box-sizing: border-box; */
}
小程序论坛看到比较好的Demo学习完后记录
转载自:微信开放社区 卢霄霄
————————————————————————————————————————————————————————
方式二: 使用swiper属性previous-margin,next-margin
js
Page({
data: {
imgUrls: [
'....../File_/5a9a9b40e9289.jpg',
'....../File_/5a9a9b454463d.jpg',
'....../File_/5a9a9b47142c6.jpg'
],
swiperIndex: 0
},
swiperChange(e) {
this.setData({
swiperIndex: e.detail.current
})
}
})
wxml
<view class='list'>
<swiper indicator-dots="{{true}}" autoplay="{{false}}" previous-margin="{{'140rpx'}}" next-margin="{{'140rpx'}}" bindchange="swiperChange">
<block wx:for="{{imgUrls}}" wx:key="{{index}}">
<swiper-item>
<image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}" />
</swiper-item>
</block>
</swiper>
</view>
wxss
swiper {
width: 750rpx;
height: 900rpx;
/* border: 1rpx solid #000; */
}
swiper-item {
padding-top: 100rpx;
/* border: 1rpx solid #000; */
}
image {
width: 375rpx;
height: 667rpx;
position: absolute;
left: 50%;
margin-left: -188rpx;
/* border: 1rpx solid #e60012; */
}
image.active {
transform: scale(1.14);
transition: all 0.2s ease-in 0s;
/* border: 1rpx solid blue; */
}