移动端经常会用页面高度超过了手机屏幕的高度,但是有没有滚动条的出现这时候就用 better-scroll 这个插件, iscroll 是常用的但是这个组件没有人在维护了,导致很多的问题没有办法解决。
better scroll 的页面结构为
<div class="shop_box" ref="shopBox"> <div class="shop_container"> <div class="shop_header"> </div> </div> </div> 第一层 div: 高度固定比如是手机屏幕的高度,overflow-y:hidden; 第二层 div: 高度不固定,只设置宽度 100%。 第三层 div: 数据部分,肯能有很多很多
1、vue2 中如何使用 better-scroll
首先安装better-scroll,然后在配置文件中查看
"dependencies": { "vue": "^2.2.6", "vue-router": "^2.3.1", "vue-resource": "^1.3.3", "better-scroll": "^0.1.7" },
然后在要用的地方引用这个组件
import BScroll from ‘better-scroll‘;
接下来初始化这个组件,在methods 里面将这个写为一个方法
_initScroll () { this.shopBoxScroll = new BScroll(this.$refs.shopBox, { // better-scroll 会将点击事件去掉,要在这里开启,同时点击在PC 会被执行两次,要在这里控制 click: true }); }
然后在函数钩子里面调用这个方法,因为mvvm 框架的数据是一步的所以要在函数周期里面使用
created () { this.$nextTick(() => { this._initScroll(); }); },
在页面中要调用的地方
<div class="shop_box" ref="shopBox">
整体为:
<script> import starT from ‘../star/star.vue‘; import BScroll from ‘better-scroll‘; export default { props: { seller: { type: Object } }, created () { this.$nextTick(() => { this._initScroll(); }); this.classMap = [‘min‘, ‘discount‘, ‘guarantee‘, ‘invoice‘, ‘special‘]; }, methods: { _initScroll () { this.shopBoxScroll = new BScroll(this.$refs.shopBox, { // better-scroll 会将点击事件去掉,要在这里开启,同时点击在PC 会被执行两次,要在这里控制 click: true }); } }, components: { ‘v-star‘: starT } }; </script>
(总结):在 vue2中如何获取dom 结构
在要获取的dom元素上添加
ref="shopBox"这样在 js 中
$refs.shopBox便可以获取dom 元素。有时候经常汇报better-scroll 找不到孩子元素原因是:html 中 ref="" 中间不要用空格尽量用驼峰命名
时间: 2024-11-05 16:30:34