vue实现界面滑动效果

本文实例为大家分享了vue实现界面滑动效果的具体代码，供大家参考，具体内容如下

项目需求+效果图

1.项目需求

【点击底部导航栏，切换页面的时候，会有一个滑动的效果】

2.效果图

代码+关键代码解析

1.代码

Botnav.vue导航栏界面

<template>
    <div>
        <transition :name="transitionName">
            <router-view class="Router"></router-view>
        </transition>
 <template>    

 <script>
 export default {
  data () {
    return {
     // 从左往右滑动
      transitionName:'slide-right',
     }
</script>   

<style lang="stylus">
      .Router
            position absolute
            width 100%
            transition  all 0.8s ease
        .silde-left-enter,.slide-right-leave-active
            opacity 0
            -webkit-transform  translate(100%,0)
            transform   translate(100%,0)
        .silde-left-leave-active,.slide-right-enter
            opacity 0
            -webkit-transform translate(-100%,0)
            transform  translate(-100%,0)
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用Vue-scroller页面input框不能触发滑动的问题及解决方法

    因为项目中有个填写信息的页面,有很多input框,引入vue-scroller后发现在input区域滑动失效:看了一下引入的vue-scroller组件里的源码,发现在组件源码里的Scroller.vue中在touchStart.touchMove和mouseDownd方法的时候被return了 touchStart(e) { // Don't react if initial down happens on a form element //注释掉这段代码就行 // if (e.target.

  • 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使用Split封装通用拖拽滑动分隔面板组件

    vue使用Split封装通用拖拽滑动分隔面板组件

    前言 手动封装一个类似Iview中的Split组件,可将一片区域,分割为可以拖拽调整宽度或高度的两部分区域,最终效果如下: 开始 基础布局 在vue工程中创建SplitPane组件,引入页面使用. <template> <div class="page"> <SplitPane /> </div> </template> <script> import SplitPane from './components/sp

  • 基于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实现页面切换滑动效果

    vue实现页面切换滑动效果

    本文实例为大家分享了vue实现页面切换滑动的具体代码,供大家参考,具体内容如下 试着用Vue做了个页面切换时滑动的效果,如下示例,源码 这里使用了Vue的transition组件,具体可见文档 直接看实现过程 先在本机安装vue-cli npm install -g @vue/cli 初始化一个项目 vue create hello-world 创建完毕后安装vue-router和vuex,现在vue-cli3支持图形化界面,可以直接在项目目录用ui启动,在管理页面点击安装 vue ui 然后建

  • 解决vue 界面在苹果手机上滑动点击事件等卡顿问题

    用vue编写项目接近尾声,需要集成到移动端中,在webstorm上界面,运行效果都很完美,但是在苹果手机上各种问题都出现了,原生项目一向滑动流畅,事件响应迅速,可是苹果手机打开这个项目有两个问题, (1).滑动页面卡顿, (2).点击事件响应缓慢,百度才发现在苹果手机上有300ms的延迟. 一.滑动页面卡顿 //页面布局 <template> <div class='content'> 页面内容 </div> </template> 在对应的组件的最外层di

  • vue 路由页面之间实现用手指进行滑动的方法

    问题描述:vue 路由页面之间如何用手指进行滑动 解决方法: 1.下载依赖:npm intall  vue-touch --save -D 2.在需要滑动的页面添加标签;<v-touch>  注意要宽高,当页面有东西要写入时,可用v-touch 包裹着其他标签: 如:<v-touch class="controller" v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight&

  • vue实现界面滑动效果

    vue实现界面滑动效果

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

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

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

  • Qt利用QScroller实现home界面滑动效果

    目录 1.QScroller类 2.QScrollerProperties滑动器参数类 3.表格类的使用示例 4.自定义home界面Demo示例 在学习本章之前需要知道滑动的关键词: 鼠标按下,鼠标滑动 : 指的是用户按下屏幕,然后进行移动的操作,此时用户滑动多少距离,那么视图就偏移多少距离. 平滑滑动 : 指的是手指离开屏幕了,然后会读取滑动的速率(距离/时间),从而让视图自己平滑的再滑动一段距离. 1.QScroller类 用于触摸屏的一个滑动器,实现用户用手指来滑动视图,有大量的参数设置可

  • vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

    说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! vue-awesome-swiper就是其中一个前辈们产出的结晶.就看首尾两个单词,就知道他是vue和swiper的爱情之子了. vue-awesome-swiper官网是中文文档,妈妈再也不用担心我读api啦."基于 Swiper4.适用于 Vue 的轮播组件".在产品催着进度的紧张环境下,在四处搜寻解决方案的情况下,这句话简直发着光啊. 具体怎么用,官方文档写的很清楚,但我还是

  • Vue 实现从小到大的横向滑动效果详解

    Vue 实现从小到大的横向滑动效果详解

    本文实例讲述了Vue 实现从小到大的横向滑动效果.分享给大家供大家参考,具体如下: 最近项目中遇到一个需求,需要实现横向滑动,并且在滑动过程中,中间的大,两边的小,通过参考其他的人代码以及自己的实践,终于做出来啦,给大家做个参考. 实现效果如下图: 先来说一下实现思路吧: 整体思路:采用vue+vue-awesome-swiper完成 因为我们的项目是采用vue来做的,所以在经过很多的考量和比较以后,选择了vue-awesome-swiper插件来辅助,从这个名字上也能看出,这个插件是支持vue

  • 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中使用better-scroll实现滑动效果及注意事项

    vue中使用better-scroll实现滑动效果及注意事项

    一.首先需要在项目中引入better-scroll 1. 在package.json 直接写入 "better-scroll":"^1.11.1"  版本以github上为准(目前最新) 2.cpnm install  在node_modules  可以查看版本是否安装 3.直接在你的组件里面写入import BScroll from 'better-scroll'; 二.better-scroll优点 1.体验像原生:滚动非常流畅,而且没有滚动条. 2.滚动位置固

  • vue移动端实现手指滑动效果

    vue移动端实现手指滑动效果

    本文实例为大家分享了vue移动端实现手指滑动效果的具体代码,供大家参考,具体内容如下 滑动时候黄色块宽度跟着变化 通过touch点击实现 目前感觉宽度变化有点问题,还在思考中 下面上代码: <template lang="html"> <div class="back" ref="back" @touchstart.prevent="touchStart" @touchmove.prevent="t

  • vue实现小球滑动交叉效果

    本文实例为大家分享了vue实现小球滑动交叉效果的具体代码,供大家参考,具体内容如下 废话不多说 直接上代码! <template> <div class="about"> <div class="box"> <!-- 默认线 --> <div class="Line"></div> <!-- 蓝色的线 --> <div class="slider-

随机推荐