1. 程式人生 > >better-scroll滑動外掛的使用

better-scroll滑動外掛的使用

使用條件 

1父容器有固定的高度 2 內容過多會溢位,使用了overflow:hidden  3直接給父元素新增使用

使用

1 下載

npm install better-scroll --save 

2 引入

import BScroll from 'better-scroll'

3建立例項物件,傳入獲取到父元素的標籤 ,放在函式中

methods: {
initScroll () {
const menuScroll = new BScroll(this.$refs.menuWrapper)
const foodsScroll = new BScroll(this.$refs.foodsWrapper)
} }

4因為是非同步的操作  在頁面更新之後 在呼叫 

mounted () {
this.$store.dispatch('getGoods', () => {
//        setTimeout(() => {
//          this.initScroll()
//        },10)
this.$nextTick(() => {
this.initScroll()
        })
      })
    },
5 在呼叫action的方法 的時候要把回調當做引數 傳入  用來 通知 呼叫者 goods元件是否有資料
getGoods({commit
}, cb) { // 傳送ajax請求, 獲取goods資料 reqGoods().then(response => { const result = response.data if(result.code===RESULT_OK) { const goods = result.data // 提交mutaion請求 commit(RECEIVE_GOODS, {goods}) cb && cb() } }) },