新聞中心
怎么在vue中使用better-scroll實(shí)現(xiàn)一個(gè)下拉刷新、上拉加載功能?針對(duì)這個(gè)問(wèn)題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。
目前創(chuàng)新互聯(lián)建站已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計(jì)、象山網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng),共同發(fā)展。
1、先開(kāi)始寫(xiě)一個(gè)簡(jiǎn)單demo,最基本的代碼架構(gòu)
template
- ...
- ...
css
/*對(duì)外層div進(jìn)行了高度上的限制*/ .wrapper { display: fixed; left: 0; top: 0; bottom: 0; width: 100%; height:300px; overflow:hidden; } .content { width:100%; height:800px; background:blue; }
script
import BScroll from 'better-scroll' this.scroll = new BScroll(new BScroll(this.$refs.wrapper))
2、進(jìn)行改造升級(jí),加上上拉刷新、下拉加載的代碼。
mounted () { this.scroll = new BScroll(this.$refs.wrapper, { // 上拉加載 pullUpLoad: { // 當(dāng)上拉距離超過(guò)30px時(shí)觸發(fā) pullingUp 事件 threshold: -30 }, // 下拉刷新 pullDownRefresh: { // 下拉距離超過(guò)30px觸發(fā)pullingDown事件 threshold: 30, // 回彈停留在距離頂部20px的位置 stop: 20 } }) this.scroll.on('pullingUp', () => { console.log('處理上拉加載操作') setTimeout(() => { // 事情做完,需要調(diào)用此方法告訴 better-scroll 數(shù)據(jù)已加載,否則上拉事件只會(huì)執(zhí)行一次 this.scroll.finishPullUp() }, 2000) }) this.scroll.on('pullingDown', () => { console.log('處理下拉刷新操作') setTimeout(() => { console.log('asfsaf') // 事情做完,需要調(diào)用此方法告訴 better-scroll 數(shù)據(jù)已加載,否則下拉事件只會(huì)執(zhí)行一次 this.scroll.finishPullDown() }, 2000) }) }
關(guān)于怎么在vue中使用better-scroll實(shí)現(xiàn)一個(gè)下拉刷新、上拉加載功能問(wèn)題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒(méi)有解開(kāi),可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
網(wǎng)站標(biāo)題:怎么在vue中使用better-scroll實(shí)現(xiàn)一個(gè)下拉刷新、上拉加載功能
文章URL:http://fisionsoft.com.cn/article/gijeeh.html