Cara melaksanakan navigasi pengelasan produk dalam uniapp
Pengenalan: Dengan perkembangan pesat Internet mudah alih, platform e-dagang telah menjadi salah satu saluran utama untuk orang ramai membeli-belah. Untuk meningkatkan pengalaman pengguna dan memudahkan pengguna mencari produk yang mereka perlukan dengan cepat, navigasi kategori produk menjadi semakin penting. Artikel ini akan memperkenalkan cara melaksanakan navigasi kategori produk dalam uniapp dan memberikan contoh kod yang sepadan.
1. Persediaan
Sebelum bermula, kita perlu menyediakan kerja berikut:
2. Buat halaman kategori
<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>
Kod di atas melaksanakan halaman navigasi kategori produk, termasuk senarai kategori menatal mendatar dan senarai produk menegak.
3. Rujukan Halaman
<navigator>
untuk merujuk halaman "kategori". <navigator>
标签引用“category”页面。<navigator url="/pages/category/category"> 分类导航 </navigator>
以上代码将在当前页面中显示一个按钮,当用户点击按钮时将跳转到分类页面。
四、数据传递和页面跳转
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
Kod di atas akan memaparkan butang pada halaman semasa, dan apabila pengguna mengklik butang, ia akan melompat ke halaman kategori.
uni.navigateTo
untuk memindahkan data kategori yang dipilih ke halaman senarai produk. 🎜🎜rrreeeeventChannel
untuk memindahkan data antara halaman. 🎜🎜Kesimpulan: 🎜Artikel ini memperkenalkan cara melaksanakan navigasi kategori produk dalam uniapp dan menyediakan contoh kod yang sepadan. Dalam pembangunan sebenar, susun atur dan gaya halaman boleh diselaraskan mengikut keperluan, dan data klasifikasi produk sebenar boleh diperolehi mengikut antara muka belakang. Saya harap kandungan di atas dapat membantu anda, dan selamat mengekod! 🎜Atas ialah kandungan terperinci Cara melaksanakan navigasi pengelasan produk dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!