vue2中使用 better-scroll
程序员文章站
2024-01-10 21:11:04
使用时有三个要点: 一:html部分 【注】 1.最外层加ref,让better-scroll通过ref来获取整个div; 2.紧跟一个div,不用加任何样式或class, 最终可以滑动的部分就是这个div,这个div必须是 加了ref 的div 的 直接子元素。 在这个div里面就可以放置希望滑动 ......
使用时有三个要点:
一: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渲染完成后触发)。
推荐阅读
-
vue2中使用 better-scroll
-
ThinkPHP中order()使用方法详解,thinkphporder_PHP教程
-
PHP使用in_array函数检查数组中是否存在某个值,in_array数组_PHP教程
-
使用python求斐波那契数列中第n个数的值示例代码
-
smarty模板引擎中内建函数if、elseif和else的使用方法_PHP
-
10_Android中通过HttpUrlConnection访问网络,Handler和多线程使用,读取网络html代码并显示在界面上,ScrollView组件的使用_html/css_WEB-ITnose
-
php中cookie的使用方法
-
PHP框架之使用Zend Framework中的Zend_Mail发送邮件讲解_PHP教程
-
uni-app中的scroll-view组件使用记录
-
HIVE中row_number函数的描述与使用场景