vue.js整合vux中的上拉加載下拉刷新實(shí)例教程-創(chuàng)新互聯(lián)

前言

成都網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、成都小程序開發(fā)、集團(tuán)成都定制網(wǎng)頁設(shè)計(jì)等服務(wù)項(xiàng)目。核心團(tuán)隊(duì)均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗(yàn)，服務(wù)眾多知名企業(yè)客戶；涵蓋的客戶類型包括：成都戶外休閑椅等眾多領(lǐng)域，積累了大量豐富的經(jīng)驗(yàn)，同時(shí)也獲得了客戶的一致贊揚(yáng)！

Vux 是基于 Vue 和 Weui 開發(fā)的手機(jī)端頁面 UI 組件庫，開發(fā)初衷是滿足公司的微信端表單需求，因?yàn)榈谌降恼{(diào)查問卷表單系統(tǒng)在手機(jī)上實(shí)在比較丑(還是 PC 那一套樣式適配了大小而已)。于是用 vue 重構(gòu)了表單組件，后來一發(fā)不可收拾把其他常用組件也一并開發(fā)了。

相比于 React 還是更喜歡用 Vue ，除了目前社區(qū)組件不多，周邊構(gòu)建工具還是比較完善的(作者也特別勤奮)。

下面話不多說了，來一看看詳細(xì)的介紹吧。

先上圖

創(chuàng)建項(xiàng)目

使用vue-cli 創(chuàng)建一個(gè)vue項(xiàng)目

安裝vux，可以參考：vux快速入門

配置

官方文檔地址

打開后會看到一段話

該組件已經(jīng)不再維護(hù)，也不建議使用，大部分情況下也不需要用到該組件。 建議使用第三方相關(guān)組件，相關(guān) issue 將不會處理。

不知道作者為啥不維護(hù)了，明明需求挺多的

我沒有用demo里的 LoadMore 組件，用的是 Scroller里自帶的 use-pullup, use-pulldown 下面是我的配置

<!-- 
 height: 我用到x-header了，文檔里說header高是48px,所以這里設(shè)置成-48
 -->
<scroller use-pullup :pullup-config="pullupDefaultConfig" @on-pullup-loading="loadMore"
  use-pulldown :pulldown-config="pulldownDefaultConfig" @on-pulldown-loading="refresh"
  lock-x ref="scrollerBottom" height="-48">
</scroller>
<script>
 import {Scroller, XHeader} from 'vux'
 const pulldownDefaultConfig = {
 content: '下拉刷新',
 height: 40,
 autoRefresh: false,
 downContent: '下拉刷新',
 upContent: '釋放后刷新',
 loadingContent: '正在刷新...',
 clsPrefix: 'xs-plugin-pulldown-'
 }
 const pullupDefaultConfig = {
 content: '上拉加載更多',
 pullUpHeight: 60,
 height: 40,
 autoRefresh: false,
 downContent: '釋放后加載',
 upContent: '上拉加載更多',
 loadingContent: '加載中...',
 clsPrefix: 'xs-plugin-pullup-'
 }
 export default {
 components: {
 XHeader,
 Scroller
 },
 mounted() {
 this.$nextTick(() => {
 this.$refs.scrollerBottom.reset({top: 0})
 })
 },
 data() {
 return {
 list: [],
 pullupDefaultConfig: pullupDefaultConfig,
 pulldownDefaultConfig: pulldownDefaultConfig
 }
 },
 methods: {
 refresh() { 
 },
 loadMore() {
 
 }
 }
 }
</script>

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁題目：vue.js整合vux中的上拉加載下拉刷新實(shí)例教程-創(chuàng)新互聯(lián)
分享地址：http://muchs.cn/article26/eeijg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、定制網(wǎng)站、網(wǎng)站設(shè)計(jì)、小程序開發(fā)、定制開發(fā)、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)