个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行!

  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>

vue 左右滑动效果的更多相关文章

  1. vue项目使用前端框架开发,实现滑动效果,若不刷新页面则无法达到预期效果的问题及解决方法

    滑动等效果的初始化时机很重要,在vue项目开发中,需到mounted()钩子函数 (当组件中的DOM结构被渲染好并放到页面中后,会执行这个钩子函数,此时即可初始化滑动效果的js代码). 若组件未挂载到 ...

  2. vue中使用better-scroll实现滑动效果

    1.安装:npm install better-scroll 2.引入:import BetterScrol from "better-scroll"; 1.滚动效果 better ...

  3. vue滚动+滑动删除标记(移动端)仿qq/微信

    安装组件 "vue-touch": "^2.0.0-beta.4", main.js引入 import VueTouch from 'vue-touch' Vu ...

  4. a 锚点跳转滑动效果

    点击a链接时,跳转到相应id的位置处,有一个滑动效果. <a href="#my">我是跳转到div</a><div id="my" ...

  5. Android Scroll分析——滑动效果产生

    相对于在Android2.x版本上出现的长按.点击事件的效果,不得不说,滑动操作具有更好的用户体验.因此,从Android 4.X版本开始,出现了更多滑动操作的效果.越来越多第三方应用模仿这样的效果, ...

  6. jquery左右滑动效果的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. bootstrap实现 手机端滑动效果,滑动到下一页,jgestures.js插件

    bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js& ...

  8. Android实现多页左右滑动效果,支持子view动态创建和cache

    要实现多页滑动效果,主要是需要处理onTouchEvent和onInterceptTouchEvent,要处理好touch事件的子控件和父控件的传递问题. 滚动控制可以利用android的Scroll ...

  9. 【Android 界面效果27】利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果

    本文主要介绍如何利用ViewPager.Fragment.PagerTabStrip实现多页面滑动效果.即google play首页.新浪微博消息(at.评论.私信.广播)页面的效果.ViewPage ...

随机推荐

  1. Android之高仿手机QQ聊天

    源代码下载 转载请注明出处,谢谢! 最终版已上传.优化下拉刷新.增加来消息声音提示.主界面改成ViewPager,实现左右滑动.新增群组.最近会话显示条数,开始上班了,不再修改了.谢谢! 国庆这几天, ...

  2. twemproxy分片处理原理--剖析twemproxy代码正编

    twemproxy在redis上能处理多命令流程只有mset,mget,del的命令,例如mset的话是mset k1 v1 k2 v2 k3 k3,mget的话是mget k1 k2 k3,del的 ...

  3. Android获取屏幕大小

    本来想着如下方法就能得到了 Display display = getWindowManager().getDefaultDisplay(); Log.i("view", &quo ...

  4. spring cloud eureka 服务端开启密码认证后,客户端无法接入问题

    Eureka服务端开启密码的认证比较简单 在pom文件中加入: <dependency> <groupId>org.springframework.boot</group ...

  5. 使用CMD实现批量重命名[转]

    关键字:cmd DOS 批处理 批量 重命名 作者:lifesinger地址:http://www.cnblogs.com/txw1958/archive/2012/12/24/cmd-batch-r ...

  6. python中string的操作函数

    在python有各种各样的string操作函数.在历史上string类在python中经历了一段轮回的历史.在最开始的时候,python有一个专门的string的module,要使用string的方法 ...

  7. python 教程 第十章、 输入/输出

    第十章. 输入/输出 1)    文件 poem = '''Programming is fun use Python!''' f = file('poem.txt', 'w') # open for ...

  8. 如何导入以前的qq聊天记录

    作者:朱金灿 来源:http://blog.csdn.net/clever101 在新版的qq2013已经可以设置聊天记录的保存路径,但是如何把以前的聊天记录都导入进来呢?今天找到了办法.首先把原来q ...

  9. 自由度(degree of freedom)

    In many scientific fields, the degrees of freedom of a system is the number of parameters of the sys ...

  10. WPF中样式和行为和触发器

    原文:WPF中样式和行为和触发器 样式简介:样式(style)是组织和重用格式化选项的重要工具,不是使用重复的标记填充XAML,以便设置外边距.内边距.颜色以及字体等细节.而是创建一系列封装所有这些细 ...