ホームページ ウェブフロントエンド uni-app uniappに横スワイプ削除機能を実装する方法

uniappに横スワイプ削除機能を実装する方法

Apr 25, 2023 am 10:48 AM

近年、モバイル アプリケーションのユーザー エクスペリエンスは、デザイナーや開発者がますます注目する領域になっています。スムーズで使いやすいインターフェイスを使用することが、アプリがユーザーを魅了する鍵となります。ユーザーエクスペリエンスの一環として、スライドして削除すると、アプリケーションの操作がより便利になり、必要なコンテンツをより早く見つけられるため、さまざまなアプリケーションでよく使用されます。

この記事ではuniappで横スライド削除を実装する方法を紹介します。

1. 背景

uniapp は、Vue.js フレームワークをベースとしたクロスプラットフォーム開発ツールで、開発者は uniapp を使用することで、複数のプラットフォーム (iOS を含む) で使用できる機能を簡単に開発できます。 、Android、H5など)。

モバイル アプリケーションを開発する場合、ユーザー エクスペリエンスは非常に重要です。横スワイプ削除は使いやすい方法で、通常はリスト項目の削除などの操作に使用できます。したがって、モバイル アプリケーションに横スワイプ削除を実装すると、アプリケーションが使いやすくなり、ユーザーの満足度が向上します。

2. 実装方法

uniappでは、swipeoutコンポーネントを使用して横スワイプ削除機能を実装できます。 Swipeout コンポーネントは、スライド削除機能を備えたリスト項目の作成に使用できる Vue.js フレームワークに基づくコンポーネントです。 uniappにスワイプアウトコンポーネントを実装する方法を紹介します。

1. リストの作成

まず、リストを作成する必要があります。リストは静的リストでも、API からデータを取得する動的リストでも構いません。たとえば、サンプル データを含む静的リストを作成できます。

<template>
  <view class="list">
    <view class="list-item" v-for="(item,index) in list" :key="index">
      <text>{{ item.title }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { title: '列表项1' },
        { title: '列表项2' },
        { title: '列表项3' },
        { title: '列表项4' },
        { title: '列表项5' }
      ]
    };
  }
};
</script>
ログイン後にコピー

2. スワイプアウト コンポーネントを追加します

次に、各リスト項目にスワイプアウト コンポーネントを追加します。ユーザーがスライドして削除する効果を確認するには、コンポーネントにボタンまたはアイコンを追加する必要があります。

<template>
  <view class="list">
    <swipeout class="list-item" v-for="(item,index) in list" :key="index" autoClose="true">
      <view slot="content">
        <text>{{ item.title }}</text>
      </view>
      <view class="right" slot="action" style="background-color: red;">
        <text style="color: #fff;">删除</text>
      </view>
    </swipeout>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { title: '列表项1' },
        { title: '列表项2' },
        { title: '列表项3' },
        { title: '列表项4' },
        { title: '列表项5' }
      ]
    };
  }
};
</script>

<style scoped>
.right {
  width: 100px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
ログイン後にコピー

上記のコードでは、スワイプアウト コンポーネントのコンテンツ スロットを使用してリスト項目のコンテンツを指定し、アクション スロットを使用して左にスライドしたときに表示されるボタンを指定します。スワイプアウト コンポーネントを再利用する場合、autoClose 属性は、次のサイド スライド アイテムを開いたときに現在のサイド スライド アイテムを自動的に閉じるかどうかを指定できます。

3. 削除メソッドを追加します

最後に、削除ボタンがクリックされたときに対応するリスト項目をデータ ソースから削除できる削除メソッドを追加します。たとえば、上記のサンプル コードに次のように delete メソッドを追加します。

<template>
  <view class="list">
    <swipeout class="list-item" v-for="(item,index) in list" :key="index" autoClose="true">
      <view slot="content">
        <text>{{ item.title }}</text>
      </view>
      <view class="right" slot="action" style="background-color: red;" @click="removeItem(index)">
        <text style="color: #fff;">删除</text>
      </view>
    </swipeout>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { title: '列表项1' },
        { title: '列表项2' },
        { title: '列表项3' },
        { title: '列表项4' },
        { title: '列表项5' }
      ]
    };
  },
  methods: {
    removeItem(index) {
      this.list.splice(index, 1);
    }
  }
};
</script>

<style scoped>
.right {
  width: 100px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
ログイン後にコピー

上記のコードでは、指定されたインデックスにあるリスト項目をリスト配列から削除するために、removeItem という名前のメソッドが追加されます。削除ボタンに @click イベントを追加して、removeItem メソッドをトリガーしました。

上記の操作を完了すると、スライドして削除機能をアプリケーションに正常に適用できるようになります。

3. まとめ

ユニアプリでの横スワイプ削除機能の実装は非常に簡単で、スワイプアウトコンポーネントを使用するだけです。横スワイプ削除機能を開発することで、アプリケーションをより使いやすくし、ユーザーエクスペリエンスを向上させることができます。これは、アプリに対するユーザーの信頼と好意を得るために必要なステップです。

以上がuniappに横スワイプ削除機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)