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:0.026667rem solid #666666;
}
.btn{
  height:100%;
  position:absolute;
  right:0;
  top:0;
  background:red;
  display:flex;
}
button{
  width:1.6rem;
  height:100%;
  background:#f8f8f8;
  border:none;
}
.item{
  padding:0.266667rem;
  display:flex;
  position:relative;
  background:#fff;
  z-index: 2;
  box-shadow: 0.026667rem 0 0.053333rem #ddd;
}
.item img{
  width:2.133333rem;
  height:2.133333rem;
  margin-right:0.4rem;
  border-radius: 0.133333rem;
}

.item .title{
  font-size:0.48rem;
  float: left;
}
.item .text{
  font-size:0.426667rem;
  color:#888;
  float: left;
  margin: 0 1.33rem;
}
.item .price{
  color:#888;
  float: left;
  margin: 0 1.33rem;
}
</style>

JS代码

<script>
    export default {
        name: 'SlideBar',
        props: {

        },
        data (){
            return {
                flag: false,
                startX: 0,
                endX: 0,
                slideStyle: {
                    left: 0,
                    transition: 'none'
                }
            }
        },
        methods: {
            start (e){  //记录开始滑动屏幕的X轴的位置
                this.flag = true;
                this.startX = e.touches[0].clientX;
                this.endX = this.$refs.slide.offsetLeft;
                this.slideStyle.transition = 'none';
            },
            move (e){
                if(this.flag){
                    // 处理鼠标移动的逻辑
                    var moveX = this.endX + (e.touches[0].clientX - this.startX);  //计算滑动的距离
                    if(Math.abs(moveX) >= this.$refs.btn.offsetWidth && moveX < 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
                        this.slideStyle.left = 0 + '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[0].clientX - this.startX;  //计算滑动的距离
                    this.slideStyle.transition = 'left .3s';
                    var btnWidth = this.$refs.btn.offsetWidth;  //class:btn的宽度
                    if(moveX < 0){
                        if(Math.abs(moveX) >= btnWidth / 2 || 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 / 2){  //小于class:btn宽度的一半
                            this.slideStyle.left = 0 + 'px';  //左滑没有超过class:btn宽度的一半回原位
                        }
                    }else if(moveX > 0 && this.endX != 0){
                        if(Math.abs(moveX) >= btnWidth / 2){
                            this.slideStyle.left = 0 + 'px';  //右滑超过class:btn宽度的一半就滑回去
                        }else if(Math.abs(moveX) < btnWidth / 2){
                            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左右滑动内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue移动端实现手机左右滑动入场动画

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 app.vue <template> <div id="app"> <transition :name="transitionName"> <keep-alive > <router-view v-if="$route.meta.keepAlive" class="Router">&

  • vue移动端的左右滑动事件详解

    本文实例为大家分享了vue移动端左右滑动事件,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://unpkg.com/vue"></script> <meta name="viewport" c

  • vue使用better-scroll实现滑动以及左右联动

    本文实例为大家分享了vue实现滑动以及左右联动效果的具体代码,供大家参考,具体内容如下 一.首先需要在项目中引入better-scroll 1. 在package.json 直接写入 "better-scroll":"^1.15.1"  版本以github上为准(目前最新) 2.cpnm install  在node_modules  可以查看版本是否安装 3.直接在你的组件里面写入import BScroll from 'better-scroll'; 二.bet

  • Vue实现移动端左右滑动效果的方法

    1. 最近得到一个新需求,需要在Vue项目的移动端页面上加上左右滑动效果,在网上查阅资料,最终锁定了vue-touch 2. 下载vue-touch (https://github.com/vuejs/vue-touch/tree/next) 注意:如果Vue是2.x 的版本的话,一定要下next分支上的. 3. 使用: 3.1 npm install vue-touch@next --save 3.2 在main.js 中 引入: import VueTouch from 'vue-touch

  • 基于Vue实现页面切换左右滑动效果

    基于Vue的页面切换左右滑动效果,具体内容如下 HTML文本页面: <template> <div id="app> <transition :name="direction" mode="out-in"> <!--动态获得transition 的name值--> <router-view class="app-view" wechat-title></router-vi

  • vue+swiper实现左右滑动的测试题功能

    最近在做一个测试题,前后可以切换题目,点击按钮选择答案,选择答案的同时改变按钮的背景色,如下图所示: 初始代码 我用了vue和swiper.所有的题目是一个对象数组,通过v-for渲染: <swiper ref="mySwiper" :options="swiperOptions"> <swiper-slide v-for="(item, index) in listData" :key="index">

  • vue使用swiper实现左右滑动切换图片

    本文实例为大家分享了vue使用swiper实现左右滑动切换图片的具体代码,供大家参考,具体内容如下 使用npm 安装vue-awesome-swiper npm install vue-awesome-swiper --save 在main.js中引用 import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.user(VueAwesomeSwiper) import 'swiper/dist/css/swiper.css' 在组件中使用 <te

  • vue基于better-scroll实现左右联动滑动页面

    本文实例为大家分享了vue基于better-scroll实现左右联动滑动页面,供大家参考,具体内容如下 界面如下: vue模板 <template> <div class="goods"> <div class="menu-wrapper"> <ul> <li class="menu-item" v-for="(good, index) in goods" :key=&qu

  • vue实现左右滑动效果实例代码

    前言 个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! vue.js是现在流行的js框架之一,vue 是一套用于构建用户界面的渐进式javascript框架,与其它大型框架不同的是:vue被设计为可以自底向上逐层应用.vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合,另外一个方面,当vue与现代化的工具链以及各种支持类库结合使用时,vue也完全能够为复杂的单页应用提供驱动. vue.js是用于构建交互式的Web界面的库,它

  • Android 自定义 HorizontalScrollView 打造多图片OOM 的横向滑动效果(实例代码)

    自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gallery的效果,但是HorizontalScrollView存在一个很大的问题,如果你仅是用来展示少量的图片,应该是没问题的,但是如果我希望HorizontalScrollView可以想ViewPager一样,既可以绑定数据集(动态改变图片),还能做到,不管多少图片都不会OOM(ViewPager内

  • vue+Element-ui实现分页效果实例代码详解

    当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination 分页,使用Pagination 快速完成分页功能 最终效果展示 <div class="deit"> <div class="crumbs"> &l

  • Vue实现侧边菜单栏手风琴效果实例代码

    效果图如下所示: <template> <div class="asideBox"> <aside> <ul class="asideMenu"> <li v-for="(item,index) in menuList"> <div class="oneMenu" @click="showToggle(item,index)"> <

  • vue框架制作购物车小球动画效果实例代码

    最近在学习前端制作了一个购物车小球的动画效果 直接上图看看效果 下面介绍一下制作这个动画的详细过程: 1.因为使用vue锁业需要使用transition标签包裹 并指定动画三个动画生命周期函数 <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div class="ball" v-if=&quo

  • Vue仿手机qq的实例代码(demo)

    vue简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 概述 这是一个16年9月份找的开源项目源代码,结合自己的实际情况进行的修改项目,以后内容将会有很大的不同,项目的目标是向QQ看齐 页面效果展示 免责声明 本项目为开源项目,如有类同,纯属巧合.

  • vue实现界面滑动效果

    本文实例为大家分享了vue实现界面滑动效果的具体代码,供大家参考,具体内容如下 项目需求+效果图 1.项目需求 [点击底部导航栏,切换页面的时候,会有一个滑动的效果] 2.效果图 代码+关键代码解析 1.代码 Botnav.vue导航栏界面 <template> <div> <transition :name="transitionName"> <router-view class="Router"></rout

  • 新手vue构建单页面应用实例代码

    本文介绍了新手vue构建单页面应用实例代码,分享给大家,具体如下 步骤: 1.使用vue-cli创建项目 2.使用vue-router实现单页路由 3.用vuex管理我们的数据流 4.使用vue-resource请求我们的node服务端 5.使用.vue文件进行组件化的开发 一.目录结构: 二.搭建项目 先安装 vue-cli: sudo npm install -g vue-cli 使用vue-cli构建初始化项目:vue init webpack project(创建webpack项目并下载

  • Android 仿今日头条简单的刷新效果实例代码

    点击按钮,先自动进行下拉刷新,也可以手动刷新,刷新完后,最后就多一行数据.有四个选项卡. 前两天导师要求做一个给本科学生预定机房座位的app,出发点来自这里.做着做着遇到很多问题,都解决了.这个效果感觉还不错,整理一下. MainActivity package com.example.fragmentmytest; import android.content.DialogInterface; import android.graphics.Color; import android.os.B

  • Android 实现ViewPager边界回弹效果实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: public class BounceBackViewPager extends ViewPager { private int currentPosition = 0; private Rect mRect = new Rect();//用来记录初始位置 private boolean handleDefault = true; private float preX = 0f; private static final float RATI

随机推荐