前端可滚动分类商品List列表 可用于电商分类列表
引言
在电商应用中，一个高效、用户友好的分类列表是提高用户体验和转化率的关键。本文将探讨如何使用xg-list-item、uni-grid和xg-tab等组件创建一个可滚动的分类商品列表，并处理相关的用户交互事件，如分类标题点击和分类条目点击。
组件介绍
xg-list-item
xg-list-item是一个高度可定制的列表项组件，适用于各种场景，包括电商产品列表。
uni-grid
uni-grid是一个网格布局组件，特别适用于展示多个项目或产品，可以方便地实现各种复杂的布局。
xg-tab
xg-tab是一个选项卡组件，可以让用户在不同的分类或页面间轻松切换。
实现可滚动分类商品列表
步骤1：引入必要的组件
首先，确保你的项目中已经引入了这三个组件。具体的引入方法可能会根据你使用的框架或库有所不同。
步骤2：构建基本布局
使用xg-tab构建顶部的分类标签，每个标签对应一个分类。然后，使用uni-grid来展示每个分类下的商品。
步骤3：添加交互功能
使用cateTitleTap方法处理分类标题的点击事件，使用cateItemClick处理商品条目的点击事件。
事件处理
分类标题点击事件
当用户点击某个分类标题时，我们需要更新当前选中的分类。这可以通过设置titleCurrentIndex来实现。同时，我们还需要根据新的分类加载并显示相应的商品。
示例代码：
<!-- #ifdef MP-WEIXIN -->
<!-- #endif -->
:class="{'cate-tab-title-selected': titleCurrentIndex === cateTabTitleIndex, 'cate-tab-title-last': (titleCurrentIndex - 1) === cateTabTitleIndex, 'cate-tab-title-next': (titleCurrentIndex + 1) === cateTabTitleIndex}"
@tap="cateTitleTap(cateTabTitleIndex)">
:class="{'cate-tab-title-text-selected': titleCurrentIndex === cateTabTitleIndex}">
{{cateTabTitle}}
:class="{'border-top-left-radius-common': titleCurrentIndex !== 0}":scroll-y="true"
:show-scrollbar="false">
:indicator-dots="true":circular="true":autoplay="true":interval="5000":duration="500">
v-for="(cate_level1, cate_level1_index) of cate.children":key="cate_level1_index">
{{cate_level1.name}}
:key="cate_level2_index">
url="/pages/product/list">
:src="cate_level2.image"mode="">
{{cate_level2.name}}
<!-- #ifdef H5 -->
<!-- #endif -->
importdatafrom'@/data/cate/cate';
importconfigfrom'./config';
exportdefault{
mixins: [config],
data() {
return{
titleCurrentIndex:0,
cateTabTitles: [],
cates: [],
};
},
asynconLoad() {
constcatesPromise = data.cates();
constcateTabTitlesPromise = data.cateTabTitles();
this.cateTabTitles =awaitcateTabTitlesPromise;
this.cates =awaitcatesPromise;
},
// #ifndef MP-WEIXIN
onNavigationBarButtonTap(e) {
constindex = e.index;
//点击导航栏消息按钮
if(1=== index) {
}
},
// #endif
methods: {
// 分类标题点击
cateTitleTap(index) {
console.log("分类标题点击 "+ index);
this.titleCurrentIndex = index;
},
// 分类条目点击
cateItemClick(item){
console.log("分类条目点击 "+JSON.stringify(item));
}
},
}
/* #ifdef H5 */
.tab-bar {
height: var(--window-bottom);
}
/* #endif */
.page {
position: fixed;
top: 0;
/* #ifdef H5 */
top: var(--window-top);
/* #endif */
right: 0;
bottom: 0;
left: 0;
@include flex-layout(column);
}
.nav-bar {
/* #ifndef APP-NVUE */
z-index: 1000;
/* #endif */
}
.nav-bar-search-bar {
// width: 500rpx;
}
.page-content {
flex: 1;
}
$border-radius-common: 30rpx;
.border-top-left-radius-common {
border-top-left-radius: $border-radius-common;
}
// .border-top-right-radius-common {
// border-top-right-radius: $border-radius-common;
// }
// 左侧标题区
$tab-title-width: 200rpx;
$tab-content-width: 751rpx - $tab-title-width;
.cate-tab-title-list {
width: $tab-title-width;
position: absolute;
top: 0;
bottom: 0;
left: 0;
background-color: $uni-color-white;
}
.cate-tab-title {
@include flex-layout(row, center, center);
height: 100rpx;
background-color: $page-bg-color;
}
.cate-tab-title-text {
font-size: $uni-font-size-lg;
}
.cate-tab-title-last {
border-bottom-right-radius: $border-radius-common;
}
.cate-tab-title-next {
border-top-right-radius: $border-radius-common;
}
.cate-tab-title-selected {
background-color: $uni-color-white;
}
.cate-tab-title-text-selected {
font-size: $uni-font-size-xl;
font-weight: bold;
}
// 右侧内容区
.cate-tab-content {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: $tab-content-width;
border-top-right-radius: $border-radius-common;
}
.cate_box {
margin: $uni-spacing-row-base $uni-spacing-col-lg;
}
$slideshow-item-image-width: 750rpx - $tab-title-width - 2*$uni-spacing-col-lg;
$slideshow-item-image-height: $slideshow-item-image-width*7/16;
.slideshow-swiper {
height: $slideshow-item-image-height;
}
.slideshow-item {
@include flex-layout(row, center, center);
}
.slideshow-item-image {
width: $slideshow-item-image-width;
height: $slideshow-item-image-height;
}
.cate-list {}
.cate-level1 {}
.cate-level2 {
@include flex-layout(column, center, center);
}
.cate-level2-image {
width: 150rpx;
height: 150rpx;
}
分类条目点击事件
当用户点击某个商品条目时，我们通常需要跳转到该商品的详情页面。在这个事件处理函数中，我们可以获取到被点击商品的所有信息，并根据这些信息来进行页面跳转或其他操作。
附组件完整代码及演示项目下载地址：https://ext.dcloud.net.cn/plugin?id=1534
网友评论