前言

站在用戶的角度思考問題，與客戶深入溝通，找到云和網(wǎng)站設(shè)計(jì)與云和網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：做網(wǎng)站、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋云和地區(qū)。

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快速入門

配置

官方文檔地址

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

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

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

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

請(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ǔ)全

完整代碼

總結(jié)

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