【better-scroll】better-scroll移动端的滚动组件(不会出现滚动条)_meichaoWen的博客-程序员信息网

技术标签: better-scroll  vue  组件  

github地址:https://github.com/ustbhuangyi/better-scroll

当 better-scroll 遇见 Vue:https://zhuanlan.zhihu.com/p/27407024

一、安装

npm install better-scroll --save

二、在Vue项目中应用

<template>
  <div class="wrapper" ref="wrapper">
    <ul class="content">
      <li>...</li>
      <li>...</li>
      ...
    </ul>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  export default {
    mounted() {
      this.$nextTick(() => {
        this.scroll = new Bscroll(this.$refs.wrapper, {})
      })
    }
  }
</script>

三、项目经验

1、scrollToElement 这个方法执行时,会将改元素位置滚动到容器顶部

this.scroll.scrollToElement(element) //element为dom元素

例如:this.scroll.scrollToElement(this.$refs.wrapper)

2、如果 wrapper 中的数据,通过接口请求时,滚动效果不生效

第一种情况:如果数据请求在本组件进行

作者的文章提到,可以将 this.scroll = new Bscroll(this.$refs.wrapper, {}) ,写到接口请求成功并且获取到数据之后。可参考文章开头第2篇文章。

另一种情况:如果是父子组件通信

接口调用是在父组件完成,然后将数据传递给子组件的时候,用第一种方式可能就不太容易。那么可以将 this.scroll 定义在 updated 生命周期函数中。

updated () {

        this.scroll = new BScroll(this.$refs.wrapper, {})

},

updated:只有data里的变量改变并且要在页面重新渲染完成之后,才会进updated生命周期,所以可以用这种方式。亲测可行。

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/meichaoWen/article/details/109662382

智能推荐

vue 的爬坑之路(一)--跨域 原: https://blog.csdn.net/y_z_w123/article/details/80251255_三江春水的博客-程序员信息网

一个简单的增加查询的例子 Vue官网前提使用脚手架安装的情况第一种本地使用代理的情况在confin/index.js 13行proxyTable: { '/api': { target: '你自己的接口地址', changeOrigin:true,//实行跨域 pathRewr...

Xilinx FPGA引脚txt文件导入excel中_小翁同学的博客-程序员信息网

需求为了把xilinx FPGA的官方引脚文件txt转成excel文件(实际官网中有对应的csv文件就是excel文件了。。。)xilinx FPGA引脚地址:https://china.xilinx.com/support/package-pinout-files.html流程(1)把下载好的txt引脚文件导入excel中:(2)选择下载的txt引脚文件经过文本...

Ubuntu之Pycharm找不到pip解决方案_Quincy379的博客-程序员信息网_pycharm没有pip

这个问题奇怪的很,以前电脑好好的,在新电脑上(Ubuntu)安装模块都是失败的,t提示找不到pip,我就纳了闷了,然后搜到如下链接: https://askubuntu.com/questions/748264/error-python-packaging-tool-pip-not-found2.这条命令就搞定了,搞了好久,还是老外的解决方案靠谱啊! sudo apt i...

魅族18关闭桌面悬浮球方法步骤_爱学习的小兔子的博客-程序员信息网

现在用户们都已经非常适应全面屏手机的使用了。但刚买的手机桌面还是会有一个悬浮导航键。很多小伙伴想要关闭却不知道方法。于是今天换换就给大家介绍一下魅族18关闭悬浮球的方法吧!魅族18关闭悬浮球步骤1、通常这些手机使用的更改都是在设置里面操作。2、进入设置后。找到辅助功能。3、在辅助功能里我们就可以看见悬浮球选项。4、选择悬浮球右侧按钮点击即可关闭。5、当然。还有一种更简单的方法便是用户们下拉菜单栏。点击悬浮球选项就能关闭。...

解决cmd中,javac提示:javac不是内部或外部命令,但是运行java、java-version正常的问题_小猴爷的博客-程序员信息网_javac' 不是内部或外部命令,也不是可运行的程序

没什么其他原因,要不就是你安装JDK不完整,要不就是你配置环境变量错误。配置环境变量:1.新建一个系统变量。变量名:JAVA_HOME变量值:D:\Java其中变量名可以随便你写,变量值必须是你安装JDK的路径2.系统变量(CLASSPATH),没有就自己新建一个变量名:CLASSPATH变量值:.;%JAVA_HOME%\lib\dt.jar;%JAVA_

HTML页面实现自动刷新的2种方式_幕尘枫的博客-程序员信息网

1.页面自动刷新:把如下代码加入<head&amp;gt;区域中<meta http-equiv=&quot;refresh&quot; content=&quot;20&quot;&amp;gt;//其中20指每隔20秒刷新一次页面2.页面自动刷新js版<script language=&quot;JavaScript&quot;&amp;gt;function myrefresh(){window.location.reload();}setTimeout('myrefre...

随便推点

c语言空格有什么作用,空格在c语言中怎么表示 C语言中的空格字符怎么表示_weixin_39640024的博客-程序员信息网

c语言中表示空格的是什么代码?分析如下: 不是所有字符都需要转义的,空格直接就敲空格,或者使用ASCII码值赋值为32。 空格没有转义字符。合法转义字符如下:\a 响铃(BEL) 、\b 退格(BS)、\f 换页(FF)、\n 换行(LF)、\r 回车(CR)、\t 水平制表(HT)、\v 垂直制表(VT) 0、\\需要准备的材料分别有:电脑、C语言编译器。在C语言中空格和换行符怎么表示如果想要表...

记录 git 忽略文件配置以及 .gitignore 修改后不生效_Thanos_cme的博客-程序员信息网

1、git 配置 bootstrap.properties 文件不提交在.gitignore 文件添加 *.properties 提交后发现没有生效,经过排查发现是缓存的问题,执行下面的命令即可解决git rm -r --cached .git add .git commit -m 'update .gitignore'...

深入研究自监督单目深度估计:Monodepth2_Tom Hardy的博客-程序员信息网

点击上方“3D视觉工坊”,选择“星标”干货第一时间送达单目深度估计模型Monodepth2对应的论文为Digging Into Self-Supervised Monocular Dept...

运算符重载及STL总结_请给我一个豆豆的博客-程序员信息网_stl运算符重载

一:运算符重载1、基本概念:运算符重载使得用户自定义的数据以一种更简洁的方式工作。(1)声明与定义格式类内声明:class X{返回类型 operator运算符(形参表);}类外定义:返回类型X::operator运算符(形参表){函数体}(2)双目运算符重载为成员函数,形参表中只有一个参数,作为运算符的右操作数,当前对象作为左操作数,通过this指针隐式传递给函数。用重载运算符加号来实现复数的加...

notepad++常用配置_sunpro518的博客-程序员信息网_notepad配置

win10环境下,文本编辑器最喜欢的还是notepad++。相比sublime text /ultraEdit/notepad 等,兼具小巧快捷方便。换来换去,还是notepad++用的习惯。一般来说,notepad++辅助文档编辑和初步代码编辑器,有这么几项配置用起来还是很舒服的。快捷键:快捷键配置如图所示。一般也都有了,就是代码注释的快捷键和一般的代码编辑器不同,用起来不习惯,就改一下。其他也可以按照自己的习惯修改。遇到有冲突的 地方,修改一下就好了。主题:notepad++支

sonar 扫描vue目录_vue+elementUI项目实战1_weixin_39664136的博客-程序员信息网

可视化新建项目打开可视化面板vue ui创建项目可以保存为预设,下次使用此预设时就不需要再次配置了创建完成后我们可以看到他的文件结构vue3初体验入口文件在public中,不在根目录配置全局变量 根目录新建vue.config.js// Vue.config.js 配置选项module.exports = { // 选项 // 基本路径 vue....