vue左右滑动效果

vue左右滑动效果
个⼈实际开发中⽤到的效果问题总结出来便于⾃⼰以后开发查看调⽤,如果也适⽤其他⼈请随意拿⾛勿喷就⾏!
vue.js是现在流⾏的js框架之⼀,vue 是⼀套⽤于构建⽤户界⾯的渐进式javascript框架，与其它⼤型框架不同的是：vue被设计为可以⾃底向上逐层应⽤。

vue的核⼼库只关注视图层，不仅易于上⼿，还便于与第三⽅库或既有项⽬整合，另外⼀个⽅⾯,当vue与现代化的⼯具链以及各种⽀持类库结合使⽤时，vue也完全能够为复杂的单页应⽤提供驱动。

vue.js是⽤于构建交互式的Web界⾯的库，它提供MVVM数据绑定和⼀个可组合的组件系统，具有简单、灵活的API。

从技术上
讲，vue.js集中在MVVM模式上的视图模型层(viewModel)，并通过双向数据绑定连接视图（view）和模型（model）。

实际的DOM操作和输出格式被抽象出来成指令和过滤器。

相⽐其他的MVVM框架，vue.js更容易上⼿，它让你通过简单⽽灵活的API创建由数据驱动的UI组件。

HTML代码
<template>
<div id="SlideBar"class="box">
<div class="item"ref="slide" :style="slideStyle" @touchstart="start($event)" @touchmove="move($event)" @touchend="end($event)">
<img src="/it/u=2555191195,2735808065&fm=26&gp=0.jpg" alt="">
<div class="right">
<div class="title">你好!</div>
<p class="text">哈哈哈</p>
<p class="price">好不</p>
</div>
</div>
<div class="btn"ref="btn">
<button>编辑</button>
<button style="background:#387ef5;color:#fff">收藏</button>
</div>
</div>
</template>
CSS代码
<style>
.box{
position:relative;
border-bottom:0.026667rem solid #666666;
}
.btn{
height:100%;
position:absolute;
right:0;
top:0;
background:red;
display:flex;
}
button{
width:1.6rem;
height:100%;
background:#f8f8f8;
border:none;
}
.item{
padding:0.266667rem;
display:flex;
position:relative;
background:#fff;
z-index: 2;
box-shadow: 0.026667rem 00.053333rem #ddd;
}
.item img{
width:2.133333rem;
height:2.133333rem;
margin-right:0.4rem;
border-radius: 0.133333rem;
}
.item .title{
font-size:0.48rem;
float: left;
}
.item .text{
font-size:0.426667rem;
color:#888;
float: left;
margin: 01.33rem;
}
.item .price{
color:#888;
float: left;
margin: 01.33rem;
}
</style>
JS代码
<script>
export default {
name: 'SlideBar',
props: {
},
data (){
return {
flag: false,
startX: 0,
endX: 0,
slideStyle: {
left: 0,
transition: 'none'
}
}
},
methods: {
start (e){ //记录开始滑动屏幕的X轴的位置
this.flag = true;
this.startX = e.touches[0].clientX;
this.endX = this.$refs.slide.offsetLeft;
this.slideStyle.transition = 'none';
},
move (e){
if(this.flag){
// 处理⿏标移动的逻辑
var moveX = this.endX + (e.touches[0].clientX - this.startX); //计算滑动的距离
if(Math.abs(moveX) >= this.$refs.btn.offsetWidth && moveX < 0){ //判断滑动的距离是否⼤于class:btn的宽度
moveX = (Math.abs(moveX) - this.$refs.btn.offsetWidth) * 0.1; // 0.3阻⼒系数
this.slideStyle.left = - this.$refs.btn.offsetWidth - moveX + 'px';
}else if(moveX >= 0){ //滑动距离是否⼤于等于0
this.slideStyle.left = 0 + 'px'; //⼤于等于0让class:item等于0
}else{
this.slideStyle.left = moveX + 'px'; //⼩于0让class:item等于滑动的距离
}
}
},
end (e){
if(this.flag){
this.flag = false;
// endX = slide.offsetLeft;
var moveX = e.changedTouches[0].clientX - this.startX; //计算滑动的距离
this.slideStyle.transition = 'left .3s';
var btnWidth = this.$refs.btn.offsetWidth; //class:btn的宽度
if(moveX < 0){
if(Math.abs(moveX) >= btnWidth / 2 || Math.abs(this.$refs.slide.offsetLeft) >= this.$refs.btn.offsetWidth){ //是否⼤于class:btn宽度的⼀半
this.slideStyle.left = - btnWidth + 'px'; //左滑超过class:btn宽度的⼀半就滑回去
}else if(Math.abs(moveX) < btnWidth / 2){ //⼩于class:btn宽度的⼀半
this.slideStyle.left = 0 + 'px'; //左滑没有超过class:btn宽度的⼀半回原位
}
}else if(moveX > 0 && this.endX != 0){
if(Math.abs(moveX) >= btnWidth / 2){
this.slideStyle.left = 0 + 'px'; //右滑超过class:btn宽度的⼀半就滑回去
}else if(Math.abs(moveX) < btnWidth / 2){
this.slideStyle.left = - btnWidth + 'px'; //右滑没有超过class:btn宽度的⼀半回原位
}
}
}
}
},
mounted (){
var _this = this;
// 使⽤js的现代事件监听transition过渡结束
this.$refs.slide.addEventListener('transitionend',function(){
_this.endX = this.offsetLeft;
})
}
}
</script>。