uniappはテーブルソートを実装します

モバイル インターネットの急速な発展に伴い、モバイル Web アプリケーションの開発はますます注目を集めています。開発効率に対する要求はますます高くなっており、Uniapp は Vue.js をベースとした開発フレームワークとして、WeChat、Alipay、App Store、Baidu などの複数のプラットフォーム向けのアプリケーションを同時に開発できます。モバイル開発では一般的な選択肢になります。この記事では、Uniappを使用してテーブルソートを実装する方法を紹介します。

1. 準備

コードの作成を開始する前に、uni-app-cli プラグインと uni-ui プラグインをインストールし、テーブル コンポーネントを導入する必要があります。

まず、cmd で次のコマンドを使用して uni-app-cli をインストールします:

npm install -g uni-app-cli

次に、Uniapp プロジェクトで次のコマンドを使用して uni-ui プラグインをインストールします。 ##

npm install @dcloudio/uni-ui

インストールが完了したら、テーブルを使用して並べ替える必要があるページにテーブル コンポーネントを導入します。

<template>
  <view>
    <uni-table
      :title="title"
      :header="header"
      :body="body"
      :order="order"
      @switch-order="switchOrder"
    />
  </view>
</template>

<script>
import { uniTable } from '@dcloudio/uni-ui'

export default {
  components: {
    uniTable
  },
  data () {
    return {
      title: '表格标题',
      header: ['姓名', '年龄', '性别'],
      body: [
        { name: '小明', age: 18, gender: '男' },
        { name: '小红', age: 20, gender: '女' },
        { name: '小刚', age: 22, gender: '男' }
      ],
      order: null
    }
  },
  methods: {
    switchOrder (order) {
      this.order = order
      if (order) {
        this.body.sort((a, b) => {
          return order === 'asc' ? a.age - b.age : b.age - a.age
        })
      }
    }
  }
}
</script>

実装方法

コード内の switchOrder メソッドは、テーブルの並べ替えロジックを処理するために使用されます。この例では、年齢に応じた昇順または降順での並べ替え (order 変数で制御) を実装しているため、JavaScript 配列の sort メソッドを使用してテーブルを並べ替えてから再レンダリングできます。

デモの例

HBuilderX を使用して Uniapp プロジェクトを作成し、pages/index/index.vue ページに上記のコードを記述します。最終的な効果は次の図に示されています。

ヘッダーで表されるフィールド (この場合は年齢) に従って並べ替えるには、ヘッダーをクリックします。同時に 2 回クリックすると、昇順と降順の変換が有効になります。

概要

Uniapp は、強力で使いやすいモバイル開発フレームワークであり、豊富なコンポーネント ライブラリとプラグイン ライブラリも提供します。 Uniappを利用したテーブルソートの実装は、シンプルでわかりやすく、コード量も少なく、ロジックも明確であり、コード量と効果の点で優れています。デモ コードを使用すると、すぐに開始して独自のモバイル アプリを実装できます。

以上がuniappはテーブルソートを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。