vue.js整合vux中的上拉加載下拉刷新實(shí)例教程

更新時(shí)間：2018年01月09日 10:01:22 作者：朋也

這篇文章主要給大家介紹了關(guān)于vue.js整合vux中上拉加載下拉刷新的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。

前言

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

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

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

先上圖

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

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

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

配置

官方文檔地址

打開(kāi)后會(huì)看到一段話

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

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

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

<!-- 
 height: 我用到x-header了，文檔里說(shuō)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>

請(qǐng)求接口遍歷數(shù)據(jù)

接口服務(wù)用的是mock.js生成的數(shù)據(jù)，可以看一下這篇文章：使用mock.js隨機(jī)數(shù)據(jù)和使用express輸出json接口

安裝 axios

yarn add axios

//...
 methods: {
 fetchData(cb) {
  axios.get('http://localhost:3000/').then(response => {
  this.$nextTick(() => {
   this.$refs.scrollerBottom.reset()
  })
  cb(response.data)
  })
 }
 }
//...

完善refresh,loadMore方法

//...
 methods: {
 refresh() {
  this.fetchData(data => {
  this.list = data.list
  this.$refs.scrollerBottom.enablePullup()
  this.$refs.scrollerBottom.donePulldown()
  })
 },
 loadMore() {
  this.fetchData(data => {
  if (this.list.length >= 10) {
   this.$refs.scrollerBottom.disablePullup()
  }
  this.list = this.list.concat(data.list)
  this.$refs.scrollerBottom.donePullup()
  })
 }
 }
//...

在組件加載的時(shí)候調(diào)用一下 loadMore 方法

//...
 mounted() {
 this.$nextTick(() => {
  this.$refs.scrollerBottom.reset({top: 0})
 })
 this.loadMore()
 }
//...

最后把html部分補(bǔ)全

<scroller>
 <div style="padding: 10px 0">
 <div class="box" v-for="(item, index) in list" :key="index">
  <p class="list"></p>
 </div>
 </div>
</scroller>

完整代碼

<template>
 <div>
 <x-header :left-options="{'showBack': false}">上拉加載，下拉刷新</x-header>
 <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">
  <div style="padding: 10px 0">
  <div class="box" v-for="(item, index) in list" :key="index">
   <p class="list"></p>
  </div>
  </div>
 </scroller>
 </div>
</template>
<script>
 import {Scroller, XHeader} from 'vux'
 import axios from 'axios'

 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})
  })
  this.loadMore()
 },
 data() {
  return {
  list: [],
  pullupDefaultConfig: pullupDefaultConfig,
  pulldownDefaultConfig: pulldownDefaultConfig
  }
 },
 methods: {
  fetchData(cb) {
  axios.get('http://localhost:3000/').then(response => {
   this.$nextTick(() => {
   this.$refs.scrollerBottom.reset()
   })
   cb(response.data)
  })
  },
  refresh() {
  this.fetchData(data => {
   this.list = data.list
   this.$refs.scrollerBottom.enablePullup()
   this.$refs.scrollerBottom.donePulldown()
  })
  },
  loadMore() {
  this.fetchData(data => {
   if (this.list.length >= 10) {
   this.$refs.scrollerBottom.disablePullup()
   }
   this.list = this.list.concat(data.list)
   this.$refs.scrollerBottom.donePullup()
  })
  }
 }
 }
</script>
<style lang="less">
 .box {
 padding: 5px 10px 5px 10px;
 &:first-child {
  padding: 0 10px 5px 10px;
 }
 &:last-child {
  padding: 5px 10px 0 10px;
 }
 }
 .list {
 background-color: #fff;
 border-radius: 4px;
 border: 1px solid #f0f0f0;
 padding: 30px;
 }
 .xs-plugin-pulldown-container {
 line-height: 40px;
 }
 .xs-plugin-pullup-container {
 line-height: 40px;
 }
</style>

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: