vue 左右滑动效果
2024-10-02 04:53:26
个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行!
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="http://img2.imgtn.bdimg.com/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:.026667rem solid #;
}
.btn{
height:%;
position:absolute;
right:;
top:;
background:red;
display:flex;
}
button{
width:.6rem;
height:%;
background:#f8f8f8;
border:none;
}
.item{
padding:.266667rem;
display:flex;
position:relative;
background:#fff;
z-index: ;
box-shadow: .026667rem .053333rem #ddd;
}
.item img{
width:.133333rem;
height:.133333rem;
margin-right:.4rem;
border-radius: .133333rem;
} .item .title{
font-size:.48rem;
float: left;
}
.item .text{
font-size:.426667rem;
color:#;
float: left;
margin: .33rem;
}
.item .price{
color:#;
float: left;
margin: .33rem;
}
</style>
JS代码
<script>
export default {
name: 'SlideBar',
props: { },
data (){
return {
flag: false,
startX: ,
endX: ,
slideStyle: {
left: ,
transition: 'none'
}
}
},
methods: {
start (e){ //记录开始滑动屏幕的X轴的位置
this.flag = true;
this.startX = e.touches[].clientX;
this.endX = this.$refs.slide.offsetLeft;
this.slideStyle.transition = 'none';
},
move (e){
if(this.flag){
// 处理鼠标移动的逻辑
var moveX = this.endX + (e.touches[].clientX - this.startX); //计算滑动的距离
if(Math.abs(moveX) >= this.$refs.btn.offsetWidth && moveX < ){ //判断滑动的距离是否大于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
this.slideStyle.left = + '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[].clientX - this.startX; //计算滑动的距离
this.slideStyle.transition = 'left .3s';
var btnWidth = this.$refs.btn.offsetWidth; //class:btn的宽度
if(moveX < ){
if(Math.abs(moveX) >= btnWidth / || 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 / ){ //小于class:btn宽度的一半
this.slideStyle.left = + 'px'; //左滑没有超过class:btn宽度的一半回原位
}
}else if(moveX > && this.endX != ){
if(Math.abs(moveX) >= btnWidth / ){
this.slideStyle.left = + 'px'; //右滑超过class:btn宽度的一半就滑回去
}else if(Math.abs(moveX) < btnWidth / ){
this.slideStyle.left = - btnWidth + 'px'; //右滑没有超过class:btn宽度的一半回原位
}
}
}
}
},
mounted (){
var _this = this;
// 使用js的现代事件监听transition过渡结束
this.$refs.slide.addEventListener('transitionend',function(){
_this.endX = this.offsetLeft;
})
}
}
</script>
最新文章
- C语言位域
- 线程间通信 GET POST
- BS中的 data:image/png;base64
- 如何使用Google Map API开发Android地图应用
- Swift开发之 (01) 语法
- [C#] 编程控制笔记本蓝牙与外部蓝牙设备通信
- MVC ajaxSubmit上传图片
- Mapper类/Reducer类中的setup方法和cleanup方法以及run方法的介绍
- flask中文问题
- UVa 673 Parentheses Balance【栈】
- LeetCode题解——Median of Two Sorted Arrays
- [翻译]Webpack解惑
- MySQL索引实战经验总结
- Windows 下安装 swoole 具体步骤
- bat脚本基本命令和格式
- git权限
- python 黏包现象及其解决方案
- java多线程的3种写法
- 【Linux】【GIt】Linux下安装和配置Git（转）
- 【题解】Luogu P4344 [SHOI2015]脑洞治疗仪