better-scroll插件 api

Vue中的better-scroll插件

在需要的文件中添加
import BScorll from 'better-scroll'; 引用的示例代碼: let scroll = new BScroll(Dom對象, {//options startX: 0, startY: 0 }) Vue獲得Dom對象方法, <div v-el:food-wrapper></div>//定義對象 this.$els.foodWrapper//獲取對象 (Vue 更新數據時是異步的,所以在數據未加載完全之前,Bscroll無法獲取目標內容的高度,所以會導致無法滾動的現象) 為了解決上面的問題,運用Vue的nextTick(); (簡單說，因為DOM至少會在當前tick里面的代碼全部執行完畢再更新。所以不可能做到在修改數據后並且DOM更新后再執行，要保證在DOM更新以后再執行某一塊代碼，就必須把這塊代碼放到下一次事件循環里面，比如setTimeout(fn, 0)，這樣DOM更新后，就會立即執行這塊代碼。) // DOM 還沒有更新 Vue.nextTick(function () { // DOM 更新了 })

問題: 
PC頁面時,點擊不會被 better-scroll阻止事件,初始化,給 better-scroll派發事件,使移動端擁有點擊事件,因此切換到PC端時,點擊事件會被執行兩次,

方法:在點擊時,傳 $event變量,Better-scroll插件中的 event事件和原生 js的 event有屬性上得區別,Better-scroll插件派發的事件時event_constructed為true,原生點擊事件是沒有這個屬性的,

selectMenu(index,event){ if(!event._constructed){//如果不存在這個屬性,則不執行下面的函數 return; } }

 

參數說明：

• startX: 0 開始的X軸位置
• startY: 0 開始的Y軸位置
• scrollY: true 滾動方向為 Y 軸
• scrollX: true 滾動方向為 X 軸
• click: true 是否派發click事件，通常判斷瀏覽器派發的click還是betterscroll派發的click，可以用event._constructed，若是bs派發的則為true
• directionLockThreshold: 5
• momentum: true 當快速滑動時是否開啟滑動慣性
• bounce: true 是否啟用回彈動畫效果
• selectedIndex: 0 wheel 為 true 時有效，表示被選中的 wheel 索引
• rotate: 25 wheel 為 true 時有效，表示被選中的 wheel 每一層的旋轉角度
• wheel: false 該屬性是給 picker 組件使用的，普通的列表滾動不需要配置
• snap: false 該屬性是給 slider 組件使用的，普通的列表滾動不需要配置
• snapLoop: false 是否可以無縫循環輪播
• snapThreshold: 0.1 用手指滑動時頁面可切換的閾值，大於這個閾值可以滑動的下一頁
• snapSpeed: 400, 輪播圖切換的動畫時間
• swipeTime: 2500 swipe 持續時間
• bounceTime: 700 彈力動畫持續的毫秒數
• adjustTime: 400 wheel 為 true 有用，調整停留位置的時間
• swipeBounceTime: 1200 swipe 回彈 時間
• deceleration: 0.001 滾動動量減速越大越快，建議不大於0.01
• momentumLimitTime: 300 符合慣性拖動的最大時間
• momentumLimitDistance: 15 符合慣性拖動的最小拖動距離
• resizePolling: 60 重新調整窗口大小時，重新計算better-scroll的時間間隔
• preventDefault: true 是否阻止默認事件
• preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ } 阻止默認事件
• HWCompositing: true 是否啟用硬件加速
• useTransition: true 是否使用CSS3的Transition屬性
• useTransform: true 是否使用CSS3的Transform屬性
• probeType: 1 滾動的時候會派發scroll事件，會截流。2滾動的時候實時派發scroll事件，不會截流。 3除了實時派發scroll事件，在swipe的情況下仍然能實時派發scroll事件

Events 事件

let scroll = new BScroll(document.getElementById('wrapper'),{ probeType: 3 }) scroll.on('scroll', (pos) => { console.log(pos.x + '~' + posx.y) ... })

 

Events 列表

• beforeScrollStart 滾動開始之前觸發
• scrollStart 滾動開始時觸發
• scroll 滾動時觸發
• scrollCancel 取消滾動時觸發
• scrollEnd 滾動結束時觸發
• flick
• refresh
• destroy 銷毀better-scroll實例時觸發

派發滾動

let scroll = new BScroll(document.getElementById('wrapper')) scroll.scrollTo(0, 500) ...


-----------------------------------

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>

 

（總結）：1、在 vue2中如何獲取dom 結構

在要獲取的dom元素上添加  

ref="shopBox"
這樣在 js 中

$refs.shopBox便可以獲取dom 元素。
有時候經常匯報better-scroll 找不到孩子元素原因是：
html 中 ref="" 中間不要用空格盡量用駝峰命名

2、移動端經常會有這種場景

數據是橫行滾動的，這個時候也是better-scroll 只不過這回改成橫向滾動的就行

this.picScroll = new BScroll(this.$refs.pic_scroll, {
                            // better-scroll 會將點擊事件去掉，要在這里開啟，同時點擊在PC 會被執行兩次，要在這里控制
                            click: true,
                            scrollX: true,
                            eventPassthrough: 'vertical'
                        });

 

3、動態DOM使用 better-scroll
　　在vue 中如果使用 v-show 控制一個dom的顯示隱藏並且這個 dom 中要有 better-scroll 的效果，在v-show 控制顯示的地方調用初始化better-scroll的函數便可以，
但是一定要放到this.$nextTick 里面，因為 vue 中 dom都是異步加載。

 // 篩選
            chooseScreenShop () {
                // tab 高兩
                this.screenTabtHight = !this.screenTabtHight;
                // 去除其它高亮顯示
                this.classification = false;
                this.sortHightLight = false;
                // 篩選
                if (this.screenTabtHight === true) {
                    this.screenShopList = true;
                    this.$nextTick(() => {
                        this._init();
                    });
                    // 其他的隱藏
                    this.sortShopList = false;
                    this.classificationBox = false;
                } else {
                    this.screenShopList = false;
                }
                this.dailog();
            },