使用better-scroll在vue中封装自己的Scroll组件
1. better-scroll 原理
用一张图感受:
绿色部分为 wrapper,也就是父容器,它会有固定的高度。黄色部分为 content,它是父容器的第一个子元素,它的高度会随着内容的大小而撑高。那么,当 content 的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了,这就是 better-scroll 的滚动原理。
2. 创建一个 Scroll.vue 组件
注意:在使用better-scroll组件时,必须外层有一个wrapper,内层有一个content(名字不唯一)。在template中给外层wrapper再添加一个ref属性,就可以通过 this.$refs.wrapper 访问到这个 DOM 对象,并且在 mounted 这个钩子函数里(因为这个时候,wrapper 的 DOM 已经渲染了)初始化 better-scroll 。
3. 在其他组件中使用 Scroll.vue 组件
注意:这里在使用组件时在<scroll></scroll>中添加一个类名是为了给wrapper设置一个高度,而content的高度随内容增多而增加,这里设置wrapper高度为150px,(我们经常也设置高度为 100vh(整个屏幕的高度)- 44px(顶部navbar的高度)- 49px(底部tabbar的高度) )小于content内容的高度,可以发生滚动。
关于better-scroll更多详细介绍请参考:https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/
better-scroll 无法滚动的原因请参考:https://www.cnblogs.com/huhanqing/p/10083901.html
使用better-scroll在vue中封装自己的Scroll组件的更多相关文章
- 在vue中使用Element的message组件
在vue中使用Element的message组件 在vue文件中使用 this.$message({ message: "提示信息", type: "success&qu ...
- Vue中利用$emit实现子组件向父组件通信
Vue中利用$emit实现子组件向父组件通信 父组件 <template> <div> <p>我是父组件</p> <child :isShow=& ...
- Vue 中渲染字符串形式的组件标签
在vue中如果要渲染字符串形式的标签,vue 提供了 v-html 指令,可以很方便的渲染出来.但是如果这个标签是一个组件,或者element-ui 的组件时,就不能解析出来了,因为v-html 只能 ...
- vue中创建全局单文件组件/命令
1.在 vue中如果我们使用基于vue.js编写的插件,我们可以使用Vue.use() 如在main.js中: 2.添加全局命令,让每个vue单文件组件都可以使用到: 第一步:最好建一个全局的命令文件 ...
- vue中封装axios方法
axios基本配置 使用方法 import axios from 'axios' // 创建axios实例 const service = axios.create({ baseURL: proces ...
- vue中封装一个全局的弹窗js
/** * Created by yx on 2017/12/21. */ export default { /** * 带按钮的弹框 * <!--自定义提示标题,内容,单个按钮事件--> ...
- vue中封装公共方法,全局使用
1.以封装的合并单元格为例,首先建立一个util.js 2.在main.js中引用 3.直接在使用该方法的地方调用就可以了
- Vue中封装axios组件实例
首先要创建一个网络模块network文件夹 里面要写封装好的几个组件 在config.js里面这样写 在index.js要这样写 core.js文件里面内容如下 然后要在main.js文件里面要设置 ...
- vue中封装jsonp
一.安装jsonp 二.封装
随机推荐
- 15分钟从零开始搭建支持10w+用户的生产环境(三)
上一篇文章介绍了这个架构中,选择MongoDB做为数据库的原因,及相关的安装操作. 原文地址:15分钟从零开始搭建支持10w+用户的生产环境(二) 三.WebServer 在SOA和gRPC大行其 ...
- 笔记本安装ubuntu18.08,解决过程中出现的各种问题
笔记本安装ubuntu18.08,解决过程中出现的各种问题 1.做启动U盘 在官网下载要安装的镜像,使用软碟通制作U盘安装盘 文件 -- 打开 然后 启动 -- 写入硬盘映像 -- 选择你的u盘 -- ...
- Python玩转人工智能最火框架 TensorFlow应用实践 学习 教程
随着 TensorFlow 在研究及产品中的应用日益广泛,很多开发者及研究者都希望能深入学习这一深度学习框架.而在昨天机器之心发起的框架投票中,2144 位参与者中有 1441 位都在使用 Tenso ...
- cocos2d 导演,场景
导演(Director) Cocos2d-x 使用导演的概念,这个导演和电影制作过程中的导演一样!导演控制电影制作流程,指导团队完成各项任务.在使用 Cocos2d-x 开发游戏的过程中,你可以认为自 ...
- 从Spring迁移到Spring Boot
文章目录 添加Spring Boot starters 添加应用程序入口 Import Configuration和Components 迁移应用程序资源 迁移应用程序属性文件 迁移Spring We ...
- Spring Boot Starters介绍
文章目录 Web Start Test Starter Data JPA Starter Mail Starter 结论 对于任何一个复杂项目来说,依赖关系都是一个非常需要注意和消息的方面,虽然重要, ...
- 谁需要GUI?快看Linux 终端生存之道
完全在 Linux 终端中生存并不容易,但这绝对是可行的. 处理常见功能的最佳 Linux shell 应用 你是否曾想像过完完全全在 Linux 终端里生存?没有图形桌面,没有现代的 GUI 软件, ...
- 2018年要学习的10大Python Web框架
通过为开发人员提供应用程序开发结构,框架使开发人员的生活更轻松.他们自动执行通用解决方案,缩短开发时间,并允许开发人员更多地关注应用程序逻辑而不是常规元素. 在本文中,我们分享了我们自己的前十大Pyt ...
- MySQL数据库的套接字文件和pid文件
MySQL数据库的套接字文件和pid文件 socket文件:当用Unix域套接字方式进行连接时需要的文件. pid文件:MySQL实例的进程ID文件. MySQL表结构文件:用来存放MySQL表结构定 ...
- 爱创课堂每日一题第十五题HTTP和HTTPS?
HTTP协议通常承载于TCP协议之上,在HTTP和TCP之间添加一个安全协议层(SSL或TSL),这个时候,就成了我们常说的HTTPS.默认HTTP的端口号为80,HTTPS的端口号为443. 转载于 ...