您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關vue-better-scroll怎么用,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
首先安裝better-scroll
npm i better-scroll -S
goods頁面模板
<template> <div class="goods"> <div class="menu-wrapper" ref="menuWrapper"> <ul> <li v-for="item in goods" class="menu-item"> <span class="text border-1px"> <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}} </span> </li> </ul> </div> <div class="foods-wrapper" ref="foodsWrapper"> <ul> <li v-for="item in goods" > <h2 class="title">{{item.name}}</h2> <ul> <li v-for="food in item.foods" class="food-item border-1px"> <div class="icon"> <img :src="food.icon" alt="" width="57" height="57"> </div> <div class="content"> <h3 class="name">{{food.name}}</h3> <p class="desc">{{food.description}}</p> <div class="extra"> <span class="food-number">月售{{food.sellCount}}份</span> <span>好評率{{food.rating}}%</span> </div> <div class="price"> <span class="nowPrice">¥{{food.price}}</span> <span class="oldPrice">¥{{food.oldPrice}}</span> </div> </div> </li> </ul> </li> </ul> </div> </div> </template>
js
<script type="text/ecmascript-6"> /* eslint-disable*/ import BScroll from 'better-scroll' export default{ props:{ seller:{ type:Object } }, data(){ return{ goods:[] } }, created(){ this.classMap=['decrease', 'discount', 'special', 'invoice', 'guarantee'] this.$http.get('/api/goods').then((res)=>{ this.goods=res.data.data; this.$nextTick(()=>{ this._initScroll(); }) console.log(this.$refs.menuWrapper) }) }, methods:{ _initScroll(){ this.meunScroll=new BScroll(this.$refs.menuWrapper,{}); this.foodsScroll=new BScroll(this.$refs.foodsWrapper,{}); } } } </script>
先用ref 綁定事件, 在vue中 用$ .refs注冊
在鉤子函數 create中 用vue-resource 請求數據,并異步調用方法
this.$nextTick(()=>{ this._initScroll(); }
注冊方法
_initScroll(){ this.meunScroll=new BScroll(this.$refs.menuWrapper,{}); this.foodsScroll=new BScroll(this.$refs.foodsWrapper,{}); }
better-scroll用法
我們先來看一下 better-scroll 常見的 html 結構:
<div class="wrapper"> <ul class="content"> <li></li> <li></li> <li></li> <li></li> </ul> </div>
當 content 的高度不超過父容器的高度,是不能滾動的,而它一旦超過了父容器的高度,我們就可以滾動內容區了,這就是 better-scroll 的滾動原理。
import BScroll from 'better-scroll' let wrapper = document.querySelector('.wrapper') let scroll = new BScroll(wrapper, {})
better-scroll 對外暴露了一個 BScroll 的類,我們初始化只需要 new 一個類的實例即可。第一個參數就是我們 wrapper 的 DOM 對象,第二個是一些配置參數。
better-scroll 的初始化時機很重要,因為它在初始化的時候,會計算父元素和子元素的高度和寬度,來決定是否可以縱向和橫向滾動。因此,我們在初始化它的時候,必須確保父元素和子元素的內容已經正確渲染了。如果沒有辦法滑動,那就是初始化的時機不對。
餓了么是這樣處理的:
mounted() { this.$nextTick(() => { this.scroll = new Bscroll(this.$refs.wrapper, {}) }) }
this.$nextTick()
這個方法作用是當數據被修改后使用這個方法會回調獲取更新后的dom再render出來
如果不在下面的this.$nextTick()
方法里回調這個方法,數據改變后再來計算滾動軸就會出錯
上拉刷新功能
<div class="wrapper" ref="wrapper"> <ul class="content" ref="content"> <li v-for="(item,key) in detail" :key="key" v-if="detail.length > 0"> <Row type="flex" justify="start" align="middle"> <Col :span="8" class="detail-item"> <span :class="{'color-red':item.is_delay === 1}">{{item.order_sn}}</span> </Col> <Col :span="8" class="detail-item"> <span>{{item.date}}</span> </Col> <Col :span="8" class="detail-item"> <span>¥ {{item.partner_profit | number2}}</span> </Col> </Row> </li> <li v-if="!scrollFinish"> <Row type="flex" justify="center" align="middle"> <Col :span="6" v-if="loadingText"> <p>{{loadingText}}</p> </Col> <Col :span="2" v-else> <Spin size="large"></Spin> </Col> </Row> </li> </ul> </div> mounted() { // 設置wrapper的高度 this.$refs.wrapper.style.height = document.getElementById("app").offsetHeight - document.getElementById("scroll").offsetTop + "px"; // better-scroll 的content高度不大于wrapper高度就不能滾動,這里的問題是,當一頁數據的高度不夠srapper的高度的時候,即使存在n頁也不能下拉 // 需要設置content的min-height大于wrapper高度 this.$refs.content.style.minHeight = this.$refs.wrapper.offsetHeight + 1 + "px"; this._initScroll(); this.getIncomeDetail(this.nextPage); // 設置scroll的高度 // this.scrollHeight = document.getElementById("app").offsetHeight - document.getElementById("scroll").offsetTop ; }, methods:{ _initScroll() { this.orderScroll = new BScroll(this.$refs.wrapper, { probeType: 3, click:true, pullUpLoad: { // 配置上啦加載 threshold: -80 //上拉80px的時候加載 }, mouseWheel: { // pc端同樣能滑動 speed: 20, invert: false }, useTransition:false, // 防止iphone微信滑動卡頓 }); // 上拉加載數據 this.orderScroll.on('pullingUp',()=>{ this.scrollFinish = false; // 防止一次上拉觸發兩次事件,不要在ajax的請求數據完成事件中調用下面的finish方法,否則有可能一次上拉觸發兩次上拉事件 this.orderScroll.finishPullUp(); // 加載數據 this.getIncomeDetail(this.nextPage); }); }
關于“vue-better-scroll怎么用”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。