better-scroll的使用方法
阿新 • • 發佈:2017-06-07
con ini 函數 logs 事件 有時 res 執行兩次 div
移動端經常會用頁面高度超過了手機屏幕的高度,但是有沒有滾動條的出現這時候就用 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="" 中間不要用空格盡量用駝峰命名
better-scroll的使用方法