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中通过路由切换页面时组件会自动滚动到顶部,需要监听滚动行为才能让滚动位置固定,better-scroll解决了这个问题。
三、下面是在项目中的使用
先给大家介绍最终要实现的效果
就是移动端很常见的效果,当滑动右边部分的时候,左边会联动显示与当前内容相符合的标题高亮,当点击左边某一个标题的时候,右边会自动滑动到相应的内容。
实现及说明
1.滚动效果
better-scroll在使用的时候需要在dom元素渲染完成之后初始化better-scroll的实例,初始化的时候,先要获取需要滑动的元素,然后在初始化的时候将获取到的元素传递给初始化函数,此时便可实现滑动效果
2.左右联动效果
左右联动效果的实现,是better-scroll通过监听事件实现的。
首先获取到右边内容盒子的高度,然后获取到该盒子中每一项的高度并做前n项高度累加(第n项的高度是前n项的高度和)存储到listHeight数组中。在初始化的时候传递属性probeType=3 (探针的效果,时时获取滚动高度),并给右边的内容盒子对象监听scroll事件,从而时时获取Y轴位置,来与listHeight数组中的数据做比较,时时计算当前的索引值,并给对边对应索引值的项添加背景色高亮,从而实现右边滑动,联动左边。
当点击左边的每一项的时候,获取到当前的索引值,并根据当前的索引值获取到与右边内容盒子中对应索引的元素,右边的盒子元素通过监听scrollToElement,并传递获取到的对应索引元素和动画时间,从而实现点击左边,实现右边联动;
实现代码如下:
html结构
demo中用到的数据结构
demo中用到的方法
方法的调用
属性计算
样式不做过多介绍
需要注意的是,该页面的这一部分给了固定的高度,且超出部分overflow:hidden;
3.better-scroll实现水平滑动效果
项目中经常会遇到需要水平滑动的需求,现在就用better-scroll来实现它
better-scroll的使用方式跟上边的说明是一样,只是配置项发生了变化,下面将代码贴出来,就明了了。
template部分
js部分
css部分
注意事项:
1.tab_content是内容的盒子,他的长度就是内容的宽度;
2.由于内容的盒子是需要滑动的,所以在内容盒子的外边还需要在加一层盒子,宽度为100%。
better-scroll插件git地址https://github.com/ustbhuangyi/better-scroll
总结
以上所述是小编给大家介绍的vue中使用better-scroll实现滑动效果及注意事项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
基于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实现起来很简单-- <div class="overlayer" @touchmove.prevent > </div> 对,就是这么简单,加上@touchmove.prevent就可以屏蔽滑动页面了,然后再和普通的遮罩层一样,加点样式 /*遮罩层*/ .overlayer{ position:fixed; left:0; top:0; width:100%; height:100%; z-index:10;
-
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导航栏组件 ly-tab
前段时间写了一个移动端的自适应滑动Vue导航栏组件,觉得有一定实用性,大家可能会用得到(当然有些大佬自己写得更好的话就没必要啦),于是前两天整理了一下,目前已经发布到npm和GitHub上了,点我到npm,点我到GitHub项目 ,有需要的同学可以在项目中 npm install ly-tab -S 或者 yarn add ly-tab 使用,具体用法下面会讲到. 好了,先看看效果吧 好的,开始废话了,实习差不多3个月了,这段时间跟着导师大佬也有接触过一些项目,也学到了不少东西,接触到的项目基本
-
vue中选项卡点击切换且能滑动切换功能的实现代码
具体代码如下所述: <div> <div class="navlist"> <ul> <li class="navli" v-for="(item,index) in navList" :class="{'activeT':nowIndex===index}" @click="tabClick(index)"><i>{{item.name}}<
-
vue实现滑动切换效果(仅在手机模式下可用)
本文实例为大家分享了vue实现滑动时红黄色块左右滑动相应距离,效果如下图 实现过程主要在于实时跟踪手指滑动位置与原位置之间的偏移量,再相应移动红黄块. 红黄块布局如下 back中包含back-l,back-r左右两块,正常情况下为了隐藏其中一块,子模块需要设置display: inline-block,并且宽度都需要设置width: 100%.父模块中设置white-space: nowrap用于处理两个子模块之间的空白. <template lang="html"> &l
-
vue自定义移动端touch事件之点击、滑动、长按事件
用法: **HTML** <div id="app" class="box" v-tap="vuetouch" //vuetouch为函数名,如没有参数,可直接写函数名 v-longtap="{fn:vuetouch,name:'长按'}" //如果有参数以对象形式传,fn 为函数名 v-swipeleft="{fn:vuetouch,name:'左滑'}" v-swiperight="{f
-
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中el-table实现自动吸顶效果(支持fixed)
目录 前言 实现思路 效果: 使用: 主要源码: 前言 看了很多案例,从简单的角度,position:sticky,似乎是比较理想的选择,可是当el-table设置了fixed后,这里的fixed会失效.最后还是采用了js监听滚动的思路实现. 实现思路 表格距离顶部的距离 设置表格距离顶部多少就吸顶-offsetTop1 获取滚动条滚动的距离 当滚动条滚动 offsetTop1 后,表格就自动吸顶 效果: 使用: 在el-table标签中配置:v-sticky="{ top: 0, parent
-
Vue中的v-for指令不起效果的解决方法
我的代码之前类似下面的结构 <div id="example-1" v-for="item in items"> <ul> <li> {{ item.message }} </li> </ul> </div> 结果发现不好用,数据读入了但是没有显示 于是我后来看官网的例子才明白,原来是id和v-for不在一个层级上,官网的例子如下,我按照不在一个层级上改,果然好用了 <ul id=&quo
-
vue中实现弹出层动画效果的示例代码
1 <template> <div class="home"> <!-- 首先将要过渡的元素用transition包裹,并设置过渡的name --> <transition name="mybox"> <div class="box" v-show="boxshow"></div> </transition> <button @click
-
vue中利用prop进行父子通信时的注意事项总结
目录 注意点一 注意点二 注意点三:单项数据流 注意点四 总结 注意点一 当在组件上传入一个普通的字符串时,我们可以直接这样写: <one name="张三"></one> 需要注意的是,当我们想要传入数字时,我们需要使用v-bind绑定一个数字,否则无法识别数字,vue会认为你传入的是一个字符串数字. 特殊的值包括:向字符键传这些类型的数据时,都需要使用v-bind来告诉vue,我们传输的是静态的值. 数字 布尔值 数组 对象 <one name=&qu
-
vue中window.addEventListener(‘scroll‘, xx)失效的解决
目录 window.addEventListener(‘scroll‘, xx)失效解决 window.addEventListener scroll在移动端无效问题 window.addEventListener(‘scroll‘, xx)失效解决 多次尝试都无法获取到滚动事件,后来加上true之后就可以了 window.addEventListener('scroll', this.clintHeight, true) window.addEventListener scroll在移动端无效
-
android 通过向viewpage中添加listview来完成滑动效果(类似于qq滑动界面)
文件名:page.xml 复制代码 代码如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill
-
vue中使用animate.css实现炫酷动画效果
目录 1.安装(在vscode终端中,使用npm安装) 2.引入 3.代码实现 animate.css 是一个来自国外的 CSS3 动画库,它提供了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果.这些效果在大多数支持CSS3的浏览器上都能保持一致.简单来说,我们使用它,只需要写很少的代码,就可以实现非常炫酷的动画效果. 官
-
Vue中Class和Style实现v-bind绑定的几种用法
项目开发中给元素添加/删除 class 是非常常见的行为之一, 例如网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式,除了导航之外其他很多地方也都会用到这种方式处理选中与未选中. 除了设置 class 我们在项目中也经常设置元素的内联样式 style,在 jquery 时代我们大多数都是利用 addClass 与 removeClass 结合使用来处理 class 的添加/删除,利用 css() 方法设置/获取元素的内联样式. 那么在 vue 中 我们如何处理这类的效果呢?
-
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也就是手机上,我们页面的宽度并不像PC端那样大,可以显示很长的导航项,但对于我们移动端来说,由于功能的拓展,或者业务的细分,往往导航项也会随之增多,一旦超过移动端在一行的页面显示宽度,那便会出现导航项换行的现象,虽说也有这样布局,但一旦导航项增多到一定程度的时候,我们的页面(首页)将均被导航项霸占,这
随机推荐
- JDBC中resutset接口操作实例详解
- JSP实现用户登录、注册和退出功能
- 写一个bat批处理文件启动windows进程和延时关闭的代码
- 详解Python中的条件判断语句
- 一些关于PHP的知识
- PHP删除HTMl标签的实现代码
- 使用python调用浏览器并打开一个网址的例子
- JSP 获取用户的真实IP两种实现方法详解
- 浅析C语言中sscanf 的用法
- mysql 一个较特殊的问题:You can't specify target table 'wms_cabinet_form'
- 字符串长度函数strlen和mb_strlen的区别示例介绍
- javascript实现rgb颜色转换成16进制格式
- 基于jquery的代码显示区域自动拉长效果
- 使用JDBC4.0操作XML类型的字段(保存获取xml数据)的方法
- mybatis一对多查询功能
- VS2003 SP1发布
- 判断一个无向图是否为连通图的方法
- Java获取当前操作系统的信息实例代码
- 详解opencv Python特征检测及K-最近邻匹配
- 小程序云开发获取不到数据库记录的解决方法