155 lines
3.5 KiB
Vue
155 lines
3.5 KiB
Vue
<template>
|
|
<view>
|
|
<view class="swiperPanel" @touchstart="startMove" @touchend="endMove">
|
|
<view class="swiperItem" v-for="(item, index) in swiperList" :key="index"
|
|
:style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
|
|
<view class="children">
|
|
<image class="pic" :src="item.logo"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <swiper class="swiperItem" circular v-for="(item, index) in swiperList" :key="index"
|
|
:style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
|
|
<swiper-item class="children">
|
|
<image class="pic" :src="item.logo"></image>
|
|
</swiper-item>
|
|
</swiper> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
swiperList: {
|
|
type: Array,
|
|
default () {
|
|
return []
|
|
}
|
|
},
|
|
timersetnteritem: {
|
|
type: String,
|
|
default: '0'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
timersetInterval: null,
|
|
slideNote: {
|
|
x: 0,
|
|
y: 0
|
|
},
|
|
screenWidth: 0,
|
|
itemStyle: [
|
|
{
|
|
transform:''
|
|
}
|
|
]
|
|
};
|
|
},
|
|
watch: {
|
|
timersetnteritem(newVal,oldVal) {
|
|
if (newVal == 1) {
|
|
clearTimeout(this.timersetInterval);
|
|
this.timersetInterval = null;
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
var macInfo = uni.getSystemInfoSync();
|
|
this.screenWidth = macInfo.screenWidth;
|
|
// 计算swiper样式
|
|
this.swiperList.forEach((item, index) => {
|
|
this.itemStyle.push(this.getStyle(index))
|
|
})
|
|
// this.timersetInterval = setInterval(() => {
|
|
// this.endMove()
|
|
// }, 2000);
|
|
},
|
|
methods: {
|
|
getStyle(e) {
|
|
if (e > this.swiperList.length / 2) {
|
|
var right = this.swiperList.length - e
|
|
return {
|
|
transform: 'scale(' + (1) + ') translate(-' + (right * 20) + '%,0px)',
|
|
zIndex: 9999 - right,
|
|
opacity: 1
|
|
}
|
|
} else {
|
|
return {
|
|
transform: 'scale(' + (1) + ') translate(' + (e * 20) + '%,0px)',
|
|
zIndex: 9999 - e,
|
|
opacity: 1
|
|
}
|
|
}
|
|
// if (e > this.swiperList.length / 2) {
|
|
// var right = this.swiperList.length - e
|
|
// return {
|
|
// transform: 'scale(' + (1 - right / 10) + ') translate(-' + (right * 9) + '%,0px)',
|
|
// zIndex: 9999 - right,
|
|
// opacity: 0.8 / right
|
|
// }
|
|
// } else {
|
|
// return {
|
|
// transform: 'scale(' + (1 - e / 10) + ') translate(' + (e * 9) + '%,0px)',
|
|
// zIndex: 9999 - e,
|
|
// opacity: 0.8 / e
|
|
// }
|
|
// }
|
|
},
|
|
startMove(e) {
|
|
this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
|
|
this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
|
|
},
|
|
endMove(e) {
|
|
var newList = JSON.parse(JSON.stringify(this.itemStyle))
|
|
// if ((e.changedTouches[0].pageX - this.slideNote.x) < 0) {
|
|
// 向左滑动
|
|
var last = [newList.pop()]
|
|
newList = last.concat(newList)
|
|
// } else {
|
|
// 向右滑动
|
|
// newList.push(newList[0])
|
|
// newList.splice(0, 1)
|
|
// }
|
|
this.itemStyle = newList
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.swiperPanel {
|
|
height: 28rpx;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.swiperItem {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
transition: all .5s;
|
|
|
|
/* 定义一个动画关键帧 */
|
|
|
|
|
|
.children {
|
|
height: 100%;
|
|
width: 25%;
|
|
// margin: 2rpx auto;
|
|
|
|
|
|
/* 应用动画，设置动画时长、循环次数和速度曲线 */
|
|
.pic {
|
|
height: 100%;
|
|
width: 100%;
|
|
border-radius: 50%;
|
|
// box-shadow: 0 0 10px #333;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style> |