ホームページ >ウェブフロントエンド >uni-app >uniappで商品分類ナビゲーションを実装する方法
uniapp で製品分類ナビゲーションを実装する方法
はじめに: モバイル インターネットの急速な発展に伴い、e コマース プラットフォームは人々が買い物をするための主要なチャネルの 1 つになりました。ユーザーエクスペリエンスを向上させ、ユーザーが必要な製品を素早く見つけやすくするために、製品カテゴリのナビゲーションの重要性がますます高まっています。この記事では、uniapp で製品カテゴリ ナビゲーションを実装する方法と、対応するコード例を紹介します。
1. 準備作業
開始する前に、次の作業を準備する必要があります:
2. カテゴリ ページの作成
<template> <view class="container"> <view class="category-list"> <scroll-view class="category-scrollview" scroll-x> <view class="category-item" v-for="(item, index) in categoryList" :key="index" @click="selectCategory(item)"> {{ item.name }} </view> </scroll-view> </view> <view class="goods-list"> <view class="goods-item" v-for="(item, index) in selectedCategory.goodsList" :key="index"> {{ item.name }} </view> </view> </view> </template> <script> export default { data() { return { categoryList: [ { name: "分类1", goodsList: [{ name: "商品1" }, { name: "商品2" }, { name: "商品3" }] }, { name: "分类2", goodsList: [{ name: "商品4" }, { name: "商品5" }, { name: "商品6" }] }, { name: "分类3", goodsList: [{ name: "商品7" }, { name: "商品8" }, { name: "商品9" }] } ], selectedCategory: {} } }, methods: { selectCategory(category) { this.selectedCategory = category; } } } </script> <style> .container { display: flex; flex-direction: column; height: 100%; padding: 20rpx; } .category-list { flex: 1; } .category-scrollview { white-space: nowrap; } .category-item { display: inline-block; padding: 10rpx 20rpx; border-radius: 10rpx; background-color: #f2f2f2; margin-right: 20rpx; color: #333; font-size: 28rpx; } .goods-list { flex: 1; margin-top: 20rpx; } .goods-item { margin-bottom: 10rpx; padding: 10rpx 20rpx; border-radius: 10rpx; background-color: #f2f2f2; color: #333; font-size: 28rpx; } </style>
上記のコードは、水平スクロールのカテゴリ リストと、縦型の製品リスト。
3. ページ参照
90553a25cfb9c2089e9e88a5e7e05f40
タグを使用して「カテゴリ」ページを参照します。 <navigator url="/pages/category/category"> 分类导航 </navigator>
上記のコードは現在のページにボタンを表示し、ユーザーがボタンをクリックするとカテゴリページにジャンプします。
4. データ転送とページ ジャンプ
uni.navigateTo
メソッドを使用して、選択したカテゴリ データを製品に転送します。リストページ。 methods: { selectCategory(category) { this.selectedCategory = category; uni.navigateTo({ url: '/pages/goodsList/goodsList', success: (res) => { res.eventChannel.emit('selectedCategory', this.selectedCategory) } }) } }
mounted() { const eventChannel = this.getOpenerEventChannel() eventChannel.on('selectedCategory', (data) => { this.selectedCategory = data }) }, data() { return { selectedCategory: {} } }
上記のコードは、eventChannel
を使用してページ間のデータ転送を実現しています。
結論:
この記事では、uniapp で製品分類ナビゲーションを実装する方法を紹介し、対応するコード例を示します。実際の開発では、必要に応じてページのレイアウトとスタイルを調整し、バックエンド インターフェイスに従って実際の製品分類データを取得できます。上記の内容がお役に立てば幸いです。コーディングを楽しんでください。
以上がuniappで商品分類ナビゲーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。