better-scroll实现滚动
通过better-scroll这个插件实现微信好友滚动列表
安装better-scroll
npm i better-scroll
实现一:点击快速入口,组件滚动到指定位置,如点击A,跳转到A的歌手中
首先,需要获取到一个数组 AZList = ["热门","A","B"......"Z"],可通过数据生成也可以写假数据
再获取每一个tab栏,例如 热门这一栏,距离窗口顶部的距离
获取方法:通过ref给每一个tab栏绑定,遍历this.$refs,创建一个数组存放数据,如clientData.push( this.$refs.offsetTop ) (这个用法不标准,自行查看如何再refs上获取offsetTop)
先根据数组生成快速入口。
点击快速入口时,获取该快速入口在数组中为索引值,如A,索引值为1
此时添加一个方法
scroll(index){ //接收一个index , 为 点击快速入口时 获取到的索引值
//clientData存放的是每一个tab栏距离窗口的距离,比如说是热门距离窗口的距离
this.$scroll是挂载到组件实例的对象,上面有提到,scrollTo是better-scroll提供的方法,可自行查阅,400是动画时间
this.$scroll.scrollTo(0,-clientData[index],400)
}
到这就可以实现点击快速入口滚动
实现二:滑动快速入口与组件联动
欢迎交流,小白一枚!
better-scroll实现滚动的更多相关文章
- DOM盒模型和位置 client offset scroll 和滚动的关系
DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...
- taro scroll tabs 滚动标签 切换
taro scroll tabs 滚动标签 切换 https://www.cnblogs.com/lml-lml/p/10954069.html https://developers.weixin.q ...
- scroll 区域滚动
网页内都有快速滚动和回弹的效果: overflow: scroll; -webkit-overflow-scrolling: touch; 实际上,Safari用了原生控件来实现,对于有-webk ...
- window.scroll原生滚动
window.scroll({ top: , behavior: 'smooth' }) js原生已经支持模拟滚动的效果啦~~~
- Elasticsearch---基于scroll技术滚动搜索大量数据
如果一次性要查出来比如10万条数据,那么性能会很差,此时一般会采取用scoll滚动查询,一批一批的查,直到所有数据都查询完处理完 使用scoll滚动搜索,可以先搜索一批数据,然后下次再搜索一批数据,以 ...
- jQuery scroll(滚动)延迟加载
延迟加载 $(window).scroll(function(){ var scrollHeight = $(document).height(); //文档高度 var scrollTop = $( ...
- Android listView scroll 恢复滚动位置
相信大家尝试过许多方法恢复滚动位置,本人也找了许多方法,唯有这个方法好用,下面把代码贴出来 声明两个变量 private int mPosition; private int lvChildTop; ...
- WPF touch Scroll -触摸滚动
借鉴地址:http://matthamilton.net/touchscrolling-for-scrollviewer 改造后支持上下和左右鼠标拖动滚动: using System; using S ...
- Scroll文字滚动js
function ScrollImgLeft(){ var speed=50, doc=document, scroll_begin = doc.getElementById("scroll ...
- MUI开发APP,scroll组件,运用到区域滚动
最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部. 头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...
随机推荐
- 删除GIT中的.DS_Store
转载自:https://www.jianshu.com/p/fdaa8be7f6c3 .DS_Store 是什么 使用 Mac 的用户可能会注意到,系统经常会自动在每个目录生成一个隐藏的 .DS_St ...
- numpy巩固
导包 import numpy as np 创建二维数组 x = np.matrix([[1,2,3],[4,5,6]]) 创建一维数组 y = np.matrix([1,2,3,4,5,6]) x ...
- Django学习路30_view中存在重复名时,取第一个满足条件的
在 settings 中添加 INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.con ...
- PHP stripslashes() 函数
实例 删除反斜杠: <?php高佣联盟 www.cgewang.comecho stripslashes("Who's Peter Griffin?");0.000.00.. ...
- 【HNOI2009】最小圈 题解(SPFA判负环+二分答案)
前言:模拟赛考试题,不会做,写了个爆搜滚蛋仍然保龄. --------------------- 题目链接 题目大意:给定一张有向图,求一个环,使得这个环的长度与这个环的大小(所含结点个数)的比值最小 ...
- “随手记”开发记录day03
今天完成了进入页面 还有记账页面 出现的问题,在登录页面中由于布局采用的错误 后边的view把前面的view遮住,看不出来,我们查找方法,找到了设置权重的办法解决 明天打算完成加号里面的内容
- 9、Bridge 桥梁模式 将类的功能层次结构与实现层结构分离 结构型设计模式
1.何为桥接模式 桥接模式是一种将类的功能层次和实现层次分离的技术,所谓类的功能层次指的是类要实现什么功能,要定义多少个函数还进行处理,在功能之中我们会用到继承来定义新的方法同时也能使用父类的方法,这 ...
- JS学习第一天
JS的三种引入方式: 内联:在标签属性中引入javascript:js代码 <a href="javascript:("helloworld")"& ...
- Vue 如何优雅的根据条件动态显示组件
常规情况下,在里动态加载不同组件的方式为: <template> <!-- 符合条件A,加载组件A --> <BusinessComponentA v-if=" ...
- Windows下,配置VS Code的Java开发环境
Windows下,配置VS Code的Java开发环境 前言 最近痴迷于VS Code的开发环境配置,原因就在于它的轻巧和免费,还能当一个非常棒的文本编辑器.如果之前你配置过VS Code并且失败了, ...