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="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 左右滑动效果的更多相关文章
- vue项目使用前端框架开发,实现滑动效果,若不刷新页面则无法达到预期效果的问题及解决方法
滑动等效果的初始化时机很重要,在vue项目开发中,需到mounted()钩子函数 (当组件中的DOM结构被渲染好并放到页面中后,会执行这个钩子函数,此时即可初始化滑动效果的js代码). 若组件未挂载到 ...
- vue中使用better-scroll实现滑动效果
1.安装:npm install better-scroll 2.引入:import BetterScrol from "better-scroll"; 1.滚动效果 better ...
- vue滚动+滑动删除标记(移动端)仿qq/微信
安装组件 "vue-touch": "^2.0.0-beta.4", main.js引入 import VueTouch from 'vue-touch' Vu ...
- a 锚点跳转滑动效果
点击a链接时,跳转到相应id的位置处,有一个滑动效果. <a href="#my">我是跳转到div</a><div id="my" ...
- Android Scroll分析——滑动效果产生
相对于在Android2.x版本上出现的长按.点击事件的效果,不得不说,滑动操作具有更好的用户体验.因此,从Android 4.X版本开始,出现了更多滑动操作的效果.越来越多第三方应用模仿这样的效果, ...
- jquery左右滑动效果的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- bootstrap实现 手机端滑动效果,滑动到下一页,jgestures.js插件
bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js& ...
- Android实现多页左右滑动效果,支持子view动态创建和cache
要实现多页滑动效果,主要是需要处理onTouchEvent和onInterceptTouchEvent,要处理好touch事件的子控件和父控件的传递问题. 滚动控制可以利用android的Scroll ...
- 【Android 界面效果27】利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果
本文主要介绍如何利用ViewPager.Fragment.PagerTabStrip实现多页面滑动效果.即google play首页.新浪微博消息(at.评论.私信.广播)页面的效果.ViewPage ...
随机推荐
- DM365 IPNC软件架构具体解释
于2013在上半场 - 年DM365.DM368的IPNC(网络摄像机)与稳定性测试工作产品结束. 1.简单介绍: TI针对TMS320DM365.DM368进行了DVR和IPNC的应用方案參考.DV ...
- mybatis如何实现分页功能?
1)原始方法,使用limit,需要自己处理分页逻辑: 对于mysql数据库可以使用limit,如: select * from table limit 5,10; --返回6-15行 对于oracle ...
- Atitit.Gui控制and面板----db数据库领域----- .比较数据库同步工具 vOa
Atitit.Gui控制and面板----db数据库区----- .数据库比較同步工具 vOa 1. 咨微海信数据库应用 工具 1 2. 数据库比較工具 StarInix SQL Compare ...
- 距离北京奥运还有359天,发布WPF版本的北京2008标志(上)
原文:距离北京奥运还有359天,发布WPF版本的北京2008标志(上) 效果图: XAML代码:<Canvas Width="343.581055" Height=" ...
- C#获取windows 10的下载文件夹路径
Windows没有为“下载”文件夹定义CSIDL,并且通过Environment.SpecialFolder枚举无法使用它. 但是,新的Vista 知名文件夹 API确实使用ID定义它FOLDERID ...
- ArcGIS API for Silverlight 学习笔记
这里主要讲解展示不同的服务地图 先看一个实例: 新建一个Silverlight项目,在MainPage.xaml文件中,引入 ESRI.ArcGIS.Client 命名空间和 ESRI.ArcGIS. ...
- Go程序开发---Go环境配置:CentOS6.5+Go1.8标准包安装
1.Go安装 1.1Go的三种安装方式 Go有多种安装方式,可以选择自己习惯的方式进行,这里介绍三种安装方式: 1)Go源码安装 2)Go标准包安装 3)第三方工具安装 这里主要介绍下Go标准包在Ce ...
- 浅谈C/C++堆栈指引——C/C++堆栈很强大(绝美)
C/C++堆栈指引 Binhua Liu 前言 我们经常会讨论这样的问题:什么时候数据存储在飞鸽传书堆栈(Stack)中,什么时候数据存储在堆(Heap)中.我们知道,局部变量是存储在堆栈中的:deb ...
- 开源库(要不要重新制造轮子)—— C/C++、Java、Python
谷歌近期开源的SLAM方案:Cartographer Boost:准标准的C++库. Eigen3: 准标准的线性代数库. Lua:非常轻量的脚本语言,主要用来做Configuration Ceres ...
- youwuku和koudaitong以及weimeng差异
优库通过涨势没有口袋,通过口袋里的东西优库有, 就像一个商场的处理这些极端类别似, 所不同的是:1.掌上通免费,但也开始掏腰包通过用户收费,因为一些特殊的.这意味着,天下没有免费的午餐,掌上通是使用完 ...