vue 左右滑动,vue实现左右滑动过渡效果
左右滚动的效果在日常开发中很常见。本文主要介绍vue实现左右滑动效果的相关信息，有需要的朋友可以参考一下。
前言
个人发展中用到的效果问题总结出来，方便你以后的发展，查看和调用。如果对别人也适用，请放心拿走，不要喷！
Vue.js是流行的js框架之一。vue是一个用于构建用户界面的渐进式javascript框架。与其他大型框架不同，vue的设计是自下而上一层一层的应用。vue的核心库只专注于视图层，不仅简单易用，而且易于与第三方库或现有项目集成。另一方面，当vue与现代工具链和各种支持类库相结合时，vue还可以为复杂的单页应用提供驱动。
Vue.js是一个用于构建交互式Web界面的库。它提供了MVVM数据绑定和一个具有简单灵活API的可组合组件系统。从技术上讲，vue.js侧重于MVVM模式上的viewModel层，通过双向数据绑定连接视图和模型。实际的DOM操作和输出格式被抽象成指令和过滤器。与其他MVVM框架相比，vue.js更容易使用。它允许您通过简单灵活的API创建数据驱动的UI组件。
实例代码
HTML代码
模板
div id=SlideBar class=box
div class= item ref= slide :style= slide style @ touch start= start($ event) @ touch move= move($ event) @ touch end= end($ event)
img src= http://img 2 . imgtn . BD img . com/it/u=2555191195，2735808065fm=26gp=0.jpg alt=
div class=右
你好！/div
哈哈哈/p
Class= price ，ok /p
/div
/div
div class=btn ref=btn
编辑按钮/按钮
button style= background:# 387 ef5；颜色：#fff 收藏夹/按钮
/div
/div
/模板
CSS代码
风格。方框{
位置：相对；
border-bottom:0.026667 rem solid # 666666；
}。btn{
身高：100%；
位置：绝对；
右：0；
top:0；
背景：红色；
显示器：flex
}
按钮{
宽度：1.6雷姆；
身高：100%；
背景：# f8f8f8
边框：无；
}。项目{
填充：0.266667雷姆；
显示器：flex
位置：相对；
背景：# fff
z指数：2；
box-shadow:0.026667 rem 0.053333 rem # DDD；
}。项目img{
宽度：2.133333雷姆；
身高：2.133333雷姆；
右边距：0.4毫米；
边界半径：0.133333。
}。项目。标题{
字体大小：0.48雷姆；
浮动：左；
}。项目。文本{
字体大小：0.426667雷姆；
颜色：# 888；
浮动：左；
保证金：0 1.33人民币；
}。项目。价格{
颜色：# 888；
浮动：左；
保证金：0 1.33人民币；
}
/风格
JS代码
脚本
导出默认值{
名称：滑杆，
道具：{
},
data (){
返回{
标志：假，
startX: 0，
endX: 0，
幻灯片样式：{
左：0，
过渡：“无”
}
}
},
方法：{
Start (e){ //记录开始滑动屏幕的X轴位置。
this.flag=true
this.startX=e.touches[0]。clientX
this.endX=this。$ refs . slide . offset left；
this . slide style . transition= none ；
},
移动(e){
if(this.flag){
//处理鼠标移动的逻辑
var moveX=this . endx(e . touches[0])。clientX-this . startx)；//计算滑动距离
If (math.abs (movex)=this。$ refs . BTN . offsetwidthmovex 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
这个。幻灯片样式。left=0 px//大于等于0让类别：项目等于0
}否则{
这个。幻灯片样式。left=moveX px//小于0让类别：项目等于滑动的距离
}
}
},
结束(e){
if(this.flag){
this.flag=false
//endX=slide。向左偏移；
var moveX=e.changedTouches[0].clientX-这个。startx//计算滑动的距离
这个。幻灯片样式。过渡= left。3s’；
var btnWidth=this .$参考文献。BTN。offsetwidth//class:btn的宽度
if(moveX 0){
如果(数学。ABS(moveX)=BTN宽度/2 数学。ABS(这个.$refs.slide.offsetLeft)=this .$refs.btn.offsetWidth){ //是否大于类别：btn宽度的一半
这个。幻灯片样式。left=-BTN宽度 px ；//左滑超过类别：btn宽度的一半就滑回去
} else if(数学。ABS(moveX)BTN宽度/2){//小于类别：btn宽度的一半
这个。幻灯片样式。left=0 px//左滑没有超过类别：btn宽度的一半回原位
}
}else if(moveX 0 this.endX！=0){
如果(数学。ABS(moveX)=BTN宽度/2){
这个。幻灯片样式。left=0 px//右滑超过类别：btn宽度的一半就滑回去
} else if(数学。ABS(moveX)BTN宽度/2){
这个。幻灯片样式。left=-BTN宽度 px ；//右滑没有超过类别：btn宽度的一半回原位
}
}
}
}
},
已安装(){
var _ this=this
//使用射流研究…的现代事件监听过渡过渡结束
这个参考文献。滑行。addevent侦听器(转换结束，函数(){
_这个。endx=这个。向左偏移；
})
}
}
/脚本
总结
到此这篇关于某视频剪辑软件实现左右滑动效果的文章就介绍到这了，更多相关某视频剪辑软件左右滑动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。