vue2中使用 better-scroll
2018-11-20 03:18:01来源：博客园 阅读 ()
使用时有三个要点：
一：html部分
<div class="example" ref="divScroll"> <div> <p>内容1</p> <p>内容2</p> <ul> <li>list1</li> <li>list2</li> <ul> </div> </div>
【注】 1.最外层加ref，让better-scroll通过ref来获取整个div；
2.紧跟一个div，不用加任何样式或class， 最终可以滑动的部分就是这个div，这个div必须是 加了ref 的div 的 直接子元素。 在这个div里面就可以放置希望滑动的内容了。
二： css部分
.example
width: 100%
position: absolute
top: 174px
bottom: 48px
left: 0
overflow: hidden
【注】 1. 这里只是举例，并不是一定要这样写。
2. 首先将 获取到的加了 ref 的div 的 高度固定， 可以设置定位， 也可以设置 height， max-height...
3. 加 overflow: hidden 。
三： js 部分
首先 引入 better-scroll：
import BScroll from 'better-scroll';
1: 使用 mounted() 函数
mounted() { this.scroll = new BScroll(this.$refs.divScroll, { click: true, }); },
2.使用 created() 函数
created() { this.$nextTick(() => { this.scroll = new BScroll(this.$refs.divScroll, { click: true, }); }); },
【注】 1.使用created 函数 要异步执行（此时html 尚未渲染完成）。
2. mounted函数 无需异步执行（mounted 函数在html渲染完成后触发）。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：Postman安装及入门教程
下一篇：ios风格的时间选择插件
- 关于jQuery UI 使用心得及技巧 2020-03-29
- js中去掉字串左右空格 2020-03-20
- Js中如何使用sort() 2020-03-18
- 使用JS在浏览器中判断当前网络连接状态的几种方法 2020-03-12
- 在JavaScript中尽可能使用局部变量的原因 2020-03-08
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
