vue自定义滑动轮播组件

自定义滑动轮播组件"/>

vue自定义滑动轮播组件

直接上代码：

<view class="swiperPanel"><viewclass="swiperItem"v-for="(item, index) in swiperList":key="index"@touchstart="startMove"@touchend="endMove($event, item)":style="{ transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity }"><view>{{ item.name }}</view></view>
</view>
export default {props: {swiperList: {type: Array,default: []}},data() {return {itemStyle: [],touchTimer: null}},mounted() {this.swiperList.forEach((item, index)=> {this.itemStyle.push(this.getStyle(index))})},methods: {getStyle(e) {if(e > this.swiperList.length / 2) {var right = this.swiperList.length - ereturn {transform: 'scale(' + (1 - right / 4) + ')translate(-' + (right * 72) + '%,0px',zIndex: 8 - right,opacity: 0.8 / right}} else {return {transform: 'scale(' + (1 - e/ 4) + ')translate(-' + (e* 72) + '%,0px',zIndex: 8 - 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, item) {let _this = thislet deltaX = e.changedTouches[0].pageX = this.slideNote.xlet deltaY = e.changedTouches[0].pageY = this.slideNote.yif(Math.abs(deltaY) > 50) {// 上下滑动不轮播e.preventDefault()return} else if(Math.abs(deltaY) < 20&& Math.abs(deltaX) < 30) {// 点击不轮播，降低滑动时轮播灵敏度e.preventDefault()return} else {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)// 滑动时定位当前domlet obj = {}this.swiperList.forEach((item1, index1)=> {if(item1.activeName==item.activeName) {if(index1==(_this.swiperList.length - 1)) {obj = _this.swiperList[index1 + 1]} else {obj = _this.swiperList[index1 + 1]}}})    } else {newList.push(newList[0])newList.splice(0, 1)// 滑动时定位当前domlet obj = {}this.swiperList.forEach((item1, index1)=> {if(item1.activeName==item.activeName) {if(index1==0) {obj = _this.swiperList[this.swiperList.length - 1]} else {obj = _this.swiperList[index1 - 1]}}})}this.itemStyle = newList}}}
}

其他扩展：点击，长按，滑动共存，利用@touchstart，@touchmove，@touchend和setTimeout实现

<template><div id="main"><button id="test-button" @touchstart="start" @touchmove="move" @touchend="end">touch测试</button></div>
</template><script>
export default {name: "Vuetouch",data() {return {is_click: true,is_move: false,}},methods: {start() {this.is_click = true;   // 默认为点击事件clearTimeout(this.Loop); // 确保定时器已清除//若不采用箭头函数，需要修改执行环境，即this指向。//或在start函数开始时将this赋值给_this并在setTimeout回调函数中使用_this代替thisthis.Loop = setTimeout(() => { this.is_click = false;// do something long press}, 800); // 当按击时间超出800ms时认为是长按事件},move() {clearTimeout(this.Loop); // 当发生滑动时清除定时器，阻止长按事件触发this.is_move = true;},end(event) {//当发生滑动时阻止touchend事件执行，直接返回if(this.is_move) {this.is_move = false;return;}let e = event || window.event;// 阻止浏览器默认事件，防止其产生干扰if(e.preventDefault){e.preventDefault();} else {e.returnValue = false;}clearTimeout(this.Loop); // 清除定时器// 没有触发长按事件和移动事件则为单击事件if(this.is_click) {// do something click}}},
}
</script><style scoped>
/* 禁止长按时选择文本 */
#test-button {-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
}
</style>