vux を vue.js に統合してプルアップ読み込みとプルダウンリフレッシュを実装する方法

この記事では主に、vux でのプルアップ読み込みとプルダウン更新を統合する vue.js に関する関連情報を、サンプル コードを通じて詳細に紹介します。必要な方は一緒に勉強しましょう。

前書き

Vux は、Vue と Weui に基づいて開発されたモバイル ページ UI コンポーネント ライブラリです。開発の本来の目的は、サードパーティのアンケート フォーム システムが非常に醜いため、会社の WeChat フォームのニーズを満たすことです。携帯電話（サイズに合わせたPCスタイルです）。そこで、vue を使用してフォーム コンポーネントを再構築し、その後、手に負えなくなり、他の一般的に使用されるコンポーネントも開発しました。

私は依然として React よりも Vue を好みます。現状ではコミュニティ コンポーネントがそれほど多くないことに加え、周囲の構築ツールが比較的充実しています (作者も非常に熱心です)。

以下で言うことはあまりありません。詳細な紹介を見てみましょう。

上の最初の画像

プロジェクトを作成します

vue-cliを使用してvueプロジェクトを作成します

vuxをインストールします。参照できます: vuxクイックスタート

設定

公式ドキュメントのアドレス

を開くと、次の段落が表示されます

このコンポーネントは現在メンテナンスされていないため、使用することは推奨されていません。ほとんどの場合、このコンポーネントを使用する必要はありません。 サードパーティ関連のコンポーネントを使用することをお勧めします。関連する問題は処理されません。

なぜ作者がそれをメンテナンスしないのかわかりません。明らかに需要が多いです

デモでは LoadMore コンポーネントを使用しませんでした。付属の use-pullup と use-pulldown を使用しました。スクローラー。これが私の構成です

<!-- 
 height: 我用到x-header了，文档里说header高是48px,所以这里设置成-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 &#39;vux&#39;
 const pulldownDefaultConfig = {
 content: &#39;下拉刷新&#39;,
 height: 40,
 autoRefresh: false,
 downContent: &#39;下拉刷新&#39;,
 upContent: &#39;释放后刷新&#39;,
 loadingContent: &#39;正在刷新...&#39;,
 clsPrefix: &#39;xs-plugin-pulldown-&#39;
 }
 const pullupDefaultConfig = {
 content: &#39;上拉加载更多&#39;,
 pullUpHeight: 60,
 height: 40,
 autoRefresh: false,
 downContent: &#39;释放后加载&#39;,
 upContent: &#39;上拉加载更多&#39;,
 loadingContent: &#39;加载中...&#39;,
 clsPrefix: &#39;xs-plugin-pullup-&#39;
 }
 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>

リクエストインターフェイスはデータを走査します

インターフェイスサービスはmock.jsによって生成されたデータを使用します。次の記事を読むことができます：mock.jsのランダムデータを使用し、Expressを使用してJSONを出力します。インターフェース

axiosをインストール

yarn add axios

rreee

最新のリフレッシュとloadMoreメソッドを改善

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

コンポーネントのロード時に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()
  })
 }
 }
//...

最後にHTML部分を完成させます

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

完全なコード

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

上記は皆さんのためにまとめたものです。将来役立つことを願っています。皆さん役に立ちます。

関連記事:

node.js やその他のテクノロジーを使用してログインと登録機能を実装するにはどうすればよいですか?

vueでフィルターを使用する方法

HTTPでのGzip圧縮の問題

フロントエンドアルゴリズムのテキスト回避に関連する問題(詳細なチュートリアル)

以上がvux を vue.js に統合してプルアップ読み込みとプルダウンリフレッシュを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。