vue 平滑滚动,vue左右滑动效果
这篇文章主要为大家详细介绍了某视频剪辑软件实现滑动和滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现滑动和滚动效果的具体代码，供大家参考，具体内容如下
面板滑动效果，父组件是结果面板，子组件是结果选项，仿照了接口中，选择组件的写法。
模板
div v-if= visible
div class= transparent :class= { active:resultPanelStatus=== top } /div
div class=mapbox-result
ref=resultPanel
style= z-index:101；
@touchstart=onTouchStart
@touchmove=onTouchMove
@touchend=onTouchEnd
:style=slideEffect
div class=地图框-结果-内容
a class= map box-result-close v-if= closed @ click= close /a
div class=mapbox-result-header
插槽名称=标题
div class=地图框-结果-标题-标题共找到【{{header}}】相关{ {总计}}结果/div
/插槽
/div
差异
class=mapbox-result-body
ref=resultBody
结果选项
ref=option
v-for=(item，index) in data
:index=index 1
:name=item.name
:meter=item.meter？项目。仪表：0
:floor-name=item.floorName
:key=index
虚拟展示=可视
@ on-click-go here= handle navigate(index)
@ on-click-item= focusResultOnMap(index)
/结果-选项
/div
/div
/div
/div
/模板
脚本
从导入结果选项./结果选项；
导出默认值{
名称：结果面板，
组件：{resultOption}，
道具：{
标题：{
类型：字符串
},
//值：{
//类型：布尔型，
//默认值：正确
//},
可关闭：{
类型：布尔型，
默认值：真
},
数据：{
类型：数组，
默认值：[]
}
},
data() {
返回{
//visible:true
结果面板状态：正常,//正常,顶部
克隆数据：这个。deepcopy(这个。数据)，
startY: 0，//开始触摸屏幕的点
endY: 0，//离开屏幕的点
moveY: 0，//滑动时的距离
disY: 0，//移动距离
幻灯片效果： //滑动效果
}
},
已安装(){
//这个参考文献。结果正文。风格。height=` $ { this。默认高度-60 } px `；
//这个参考文献。结果正文。风格。溢出y= hidden
},
计算值：{
total() {
返回这个。数据。长度；
},
defaultHeight() {
返回this.data.length 3？240 : this.data.length * 60 60 //当结果大于3时，默认只显示三个
},
可见(){
这个。resultpanelstatus= normal
这个。slide effect=` transform:translate y(-$ { this。默认高度} px)；过渡：所有。5s
归还这个100美元商店。状态。结果面板。展示；
}
},
方法：{
/**
* 手指接触屏幕
*/
onTouchStart(ev) {
ev=ev 事件；
//ev。防止默认()；
if (ev.touches.length===1) {
this.startY=ev.touches[0].客户关系；
}
},
/**
* 手指滑动
*/
onTouchMove(ev) {
ev=ev 事件；
console.log(ev.target:，ev。目标)；
//ev。防止默认()；
if (ev.touches.length===1) {
让结果面板=this .$参考文献。结果面板。偏移高度；
this.moveY=ev.touches[0].客户关系；
这个。disy=这个。动起来-这个。starty
如果(这个。请不要这样。此默认高度。显示结果面板。resultpanelstatus=== normal ){//向上滑动
这个。slide effect=` transform:translate y($ {-this。此默认高度。disy } px)；过渡：全0;`;
//内容随着面板上滑出现的动画
这个参考文献。结果正文。风格。transition= all。5s’；
这个参考文献。结果正文。风格。height=` $ { this .$参考文献。结果面板。偏移高度-60 } px `；
} else if(这个。resultpanelstatus=== top this。显示0){
这个。滚动()；
} else if(这个。显示0。resultpanelstatus=== top ){//向下滑动
/*当手指向下滑动时，如果滑动的起始点不在非内容区以及滚动顶部不为0,则为滚动，否则面板随着手指滑动并隐藏滚动条，以防止下滑过程中，能够滚动数据*/
如果（这个参考文献。结果正文。滚动顶部0 ev。目标！==文档。getelementsbyclassname( map box-result-header )[0]){
这个。滚动()；
}否则{
这个。slide effect=` transform:translate y($ {-result panel this。disy } px)；过渡：全0 `;
这个参考文献。结果正文。风格。溢出y= hidden
} //当处于标准状态，手指向下滑，则下滑
} else if(这个。显示0。resultpanelstatus=== normal ){
这个。slide effect=` transform:translate y($ {-this。此默认高度。disy } px)；过渡：全0 `;
}
}
},
/**
* 离开屏幕
*/
onTouchEnd(ev) {
ev=ev 事件；
//ev。防止默认()；
如果(ev。改变了风格。长度===1){
this.endY=ev.changedTouches[0].客户关系；
这个。disy=这个。恩迪-这个。starty
如果(这个。显示0。resultpanelstatus=== top ){//向下滑动
/*当手指向下滑动时，如果滑动的起始点不在非内容区以及滚动顶部不为0,则为滚动，否则面板滑动到默认位置*/
如果（这个参考文献。结果正文。滚动顶部0 ev。目标！==文档。getelementsbyclassname( map box-result-header )[0]){
这个。滚动()；
}否则{
这个。正常()；
}
//手指离开的时候，出现滚动条，已解决第一次滑动内容的时候，滚动条才会出现而内容没有滑动的问题
} else if(这个。显示0。resultpanelstatus=== normal ){//向上滑动
这个。top()；
这个。move()；
} else if(这个。显示0。resultpanelstatus=== top ){
这个。滚动()；
} else if(这个。显示0。resultpanelstatus=== normal ){
这个。正常()；//处于标准状态下滑，手指离开屏幕，回归标准状态
}
}
},
//当到默认高度时，设置状态为正常状态，并且隐藏滚动条，将滚动顶部置0,以避免内前面的内容被隐藏
正常(){
//这个参考文献。结果正文。风格。溢出y= hidden
这个。slide effect=` transform:translate y($ {-this。默认高度} px)；过渡：全。5s；`;
这个。resultpanelstatus= normal
这个参考文献。结果正文。scroll top=0；
},
top() {
这个。幻灯片效果= transform:平移y(-100%)；过渡：所有。“5s”；
this.resultPanelStatus= top
},
move() {
//这个参考文献。结果正文。风格。height=` $ {-这个。显示这个。默认高度} px `；
这个参考文献。结果正文。风格。溢出y= auto
},
滚动(){
这个参考文献。结果正文。风格。溢出y= auto
},
关闭(电动汽车){ //单击事件会和触摸开始事件冲突
//当面板处于最高状态被关闭时，恢复到正常高度状态，以避免下次打开仍处于最高处
这个。正常()；
//这个参考文献。结果正文。scroll top=0；
//这个参考文献。结果正文。风格。溢出y= hidden
这个100美元商店。状态。结果面板。show=false
这个emit( on-cancel )；
},
handleNavigate(_index) {
//这个. emit(on-item-click ，JSON。解析(JSON。stringify(这个。clonedata[_ index]))，_ index)；//这个是获取行的元素，和索引
这个. emit(on-click-gohere ，_ index)；//这个是获取索引
},
focusResultOnMap(_index) {
这个$emit(点击项目，_ index)；//这个是获取索引
},
//deepCopy
深层拷贝(数据){
const t=this.typeOf(数据);
让o；
if (t===array) {
o=[]；
} else if (t===object) {
o={ }；
}否则{
返回数据；
}
if (t===array) {
对于(设I=0；我数据长度；i ) {
哦。推(这个。deepcopy(data[I])；
}
} else if (t===object) {
对于（让我输入数据){
o[I]=这个。deepcopy(data[I])；
}
}
返回o；
},
类型（对象){
const toString=object。原型。toString
常数映射={
[对象布尔值]:布尔值，
[对象编号]:编号，
[对象字符串]:字符串，
[目标函数]:函数，
[对象数组]:数组，
[对象日期]:日期，
[object RegExp]: regExp ，
[对象未定义]:未定义，
[对象Null]: null ，
[对象对象]:对象
};
返回map[tostring。call(obj)]；
}
}
}
/脚本
style type="text/less "范围
//限定范围是指这个样式只能用于当前组件。透明{
底部：0;
左：0;
位置：绝对；
右：0;
top:0；
背景色：rgba(0，0，0，0.3)；
不透明度：0;
过渡：不透明度。3s；
z-index:-1000000000；
}。transparent.active {
不透明度：1;
z指数：0;
}。地图框-结果{
身高：calc(100%-2.8 VW)；
背景：# fff
位置：绝对；
字体系列：ping fangsc-Regular；
字体大小：12px
颜色：# 4A4A4A
底部：0;
宽度：94.4vw
保证金：0 2.8vw
大纲：0;
溢出：自动；
框大小：边框-框；
top:100%；
溢出：隐藏；
border-radius:5px 5px 0 0；
盒影：0 0 12px 0px rgba(153，153，153，0.25)；
}。地图框-结果-内容{
位置：相对；
背景色：# fff
边框：0;
}。地图框-结果-标题{
填充：24px 10vw
行高：1;
文本对齐：居中；
}。地图框-结果-标题-标题{
空白：nowrap
}。地图框-结果-关闭{
位置：绝对；
宽度：16px
高度：16px
背景：url(././assets/close-black @ 2x。png’)；
背景尺寸：100% 100%;
背景-重复：不重复；
右：5.6vw
顶部：22px
}。地图框-结果-正文{
高度：自动；
}
/风格
模板
div class=mapbox-result-option
div class=地图框-结果-选项-内容
！-button class=地图框-BTN地图框-BTN-初级地图框-结果-选项-BTN地图框-BTN-右键 @ click=手柄点击
I class=地图框-结果-选项-图标/I
/按钮-
a class= map box-result-option-nav @ click= handle click /a
div class=地图框-结果-选项-项目 @ click=结果项目单击
div class= map box-result-option-item-main
地图框-结果-选项-标题
span class= map box-result-option-order“{ index } }/span
{{name}}
/p
地图框-结果-选项-注释
{{floorName}}，距离当前位置{ {米}}米
/p
/div
/div
/div
/div
/模板
脚本
导出默认值{
名称：结果选项，
道具：{
值：{
类型：布尔型，
默认值：真
},
索引：{
类型：数量
},
名称：{
类型：字符串
},
仪表：{
类型：数量
},
楼层名称：{
类型：字符串
}
},
data() {
返回{
}
},
方法：{
handleClick() {
这个. emit(点击-转到此处)；
},
resultItemClick() {
这个emit( on-click-item )；
}
}
}
/脚本
style type="text/less "范围。地图框-结果-选项{
高度：60px
宽度：calc(100%-8.3 VW)；
显示：块；
border-bottom:1px solid # dbd6d 6；
框大小：边框-框；
边距：0自动；
溢出：隐藏；
}。地图框-结果-选项-内容{
填充：0;
边距：0;
字体系列：ping fangsc-Regular；
字体大小：12px
颜色：# 4A4A4A
位置：相对；
显示：内嵌-块；
宽度：100%;
}。地图框-btn {
显示：内嵌-块；
边距-底部：0;
字体粗细：400;
文本对齐：居中；
垂直对齐：居中；
触摸-动作：操纵；
背景-图像：无；
边框：1px纯色透明；
空白：nowrap
行高：1.5;
}。地图框-结果-选项-btn {
位置：相对；
边界半径：50%;
高度：30px
宽度：8.3vw
填充：0;
大纲：无；
保证金：15px 4.2 w15px 0；
z指数：1;/*避免文字挡住了按钮*/
}。地图框BTN主要{
颜色：# fff
背景色：# 2a 70 Fe
边框-颜色：# 2a 70 Fe
}。地图框BTN右侧{
浮动：对；
右边距：4.2 VW
}。地图框-结果-选项-图标{
位置：绝对；
top:50%；
左：50%;
transform: translate(-50%，-50%)；
背景尺寸：100% 100%;
宽度：2.9vw
高度：18px
背景：url(./././static/image/icon_nav3.png )不重复；
}。地图框-结果-选项-导航
背景：url(././assets/BTN _ route _ planning _ normal . png )；
宽度：30px
高度：30px
背景尺寸：100% 100%；
背景-重复：不重复；
浮动：对；
显示：块；
位置：绝对；
右：0；
top:15px；
z指数：1；
}。地图框-结果-选项-项目{
显示：块；
位置：相对；
边距：10px自动；
}。地图框-结果-选项-项目-主{
显示：块；
垂直对齐：居中；
字体大小：16px
颜色：# 4A4A4A
}。地图框-结果-选项-标题{
字体：15px/21px ping fangsc-Regular；
位置：相对；
}。地图框-结果-选项-顺序{
字体：15px/21px ping fangsc-Medium；
位置：相对；
左边距：1.9vw
margin-right:4.6 VW；
}。地图框-结果-选项-注释{
字体：12px/16px ping fangsc-Regular；
颜色：# 9 B9 b9b；
空白：正常；
位置：相对；
左边距：12.5vw
margin-top:3px；
}
/风格
Ev=ev event，这个写法兼容所有浏览器。在Firefox浏览器中，事件绑定函数获取事件本身，通过函数传入，而在IE等浏览器中，可以通过window.event或event获取函数本身。
touchend点击事件的冲突解决：在touchstart、touchmove、touch事件中移除e . prevent default()；它将防止触发后来的事件；但是，在移除preventDefault事件时会出现一个问题。当你在微信网页中打开这个页面，向下滑动，会触发微信的下拉事件，但是在app中应用这个组件就不会有这个问题了。解决微信网页中手指向下滑动触发下拉刷新事件的方法有一个，就是使用setTimeout。
settime out(()={ e . prevent default()；}, 200);
这可以防止在点击事件之后触发默认事件。
Scroll事件：scroll事件在touchmove和touchend中触发，面板的上滑事件和scroll事件不同时执行。
向上滑动时，判断面板状态；如果处于顶部状态，将触发滚动事件；当手指离开面板时，仍然会是滚动事件；如果处于正常状态，向上滑动面板。当手指离开面板时，将面板设置为顶部状态，并将内容的滚动条设置为可见；当初始面板滑动到顶部时，第二个滑动面板会触碰滚动条，可以滚动内容；
下滑时，判断是否处于顶端状态；如果是顶部状态，当内容区域的scrollTop大于0且手指初始位置在内容区域时，则触发滚动，否则触发面板向下滑动；在正常状态下，你可以向下滑动而不触发任何事件，也可以向下滑动，但当你的手指离开屏幕时，它会回到默认位置。这里使用的是后一种方法。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。