新增首页模板
This commit is contained in:
217
pages/index/category-ele.vue
Normal file
217
pages/index/category-ele.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<view class="category-wrap">
|
||||
<view class="scroll-wrap">
|
||||
<scroll-view class="scroll scroll1" :class="{ short: short }" scroll-x scroll-with-animation :show-scrollbar="false" :scrollLeft="scrollLeft1">
|
||||
<!-- <view class="item tab-item0" :class="{ active: all }" @click="page5handleTabClick('-1', '-1')">
|
||||
<text class="t">推荐</text>
|
||||
</view> -->
|
||||
<view class="item tab-item0" :class="{ active: nav_active_index == index && !all }" v-for="(item, index) in category_list" :key="item.id" @click="page5handleTabClick(index, 'nav_active_index')">
|
||||
<text class="t" :style="{ color: fontColor }">{{ item.name }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<navigator class="more" hover-class="none" open-type="switchTab" url="/pages/goods-category/goods-category">
|
||||
<uni-icons type="bars" :color="fontColor" size="18"></uni-icons>
|
||||
<text class="t" :style="{ color: fontColor }">分类</text>
|
||||
</navigator>
|
||||
</view>
|
||||
<scroll-view class="scroll" scroll-x scroll-with-animation :show-scrollbar="false" :scrollLeft="scrollLeft2" v-if="category_list.length">
|
||||
<template v-if="!all">
|
||||
<view class="item tab-item1" :class="{ active: nav_active_item_two_index == index }" v-for="(item, index) in category_list[nav_active_index].items" :key="item.id" @click="page5handleTabClick(index, 'nav_active_item_two_index')">
|
||||
<view class="flex">
|
||||
<image class="img" :src="item.realistic_images" mode="aspectFit"></image>
|
||||
<text class="t" :style="{ color: fontColor }">{{ item.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item active" v-if="!category_list[nav_active_index].items.length">
|
||||
<view class="flex">
|
||||
<image class="img" src="https://store.sxczgkj.com/static/upload/images/common/2025/06/06/1749177557795147.png?noCache=mbk75qlp" mode="aspectFit"></image>
|
||||
<text class="t" :style="{ color: fontColor }">全部</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="item active">
|
||||
<view class="flex">
|
||||
<image class="img" src="https://store.sxczgkj.com/static/upload/images/common/2025/06/06/1749177557795147.png?noCache=mbk75qlp" mode="aspectFit"></image>
|
||||
<text class="t" :style="{ color: fontColor }">全部</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
category_list: {
|
||||
type: [Array, String],
|
||||
default: [],
|
||||
},
|
||||
fontColor: {
|
||||
type: String,
|
||||
default: '#333333',
|
||||
},
|
||||
short: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
all: false,
|
||||
scrollLeft1: 0,
|
||||
scrollLeft1_widths: [],
|
||||
scrollLeft2: 0,
|
||||
scrollLeft2_widths: [],
|
||||
nav_active_index: 0,
|
||||
nav_active_item_two_index: 0,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initTabWidths();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
// 初始化获取所有选项卡的宽度
|
||||
initTabWidths() {
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
query
|
||||
.selectAll('.tab-item0')
|
||||
.boundingClientRect((rects) => {
|
||||
this.scrollLeft1_widths = rects.map((rect) => rect.width);
|
||||
})
|
||||
.exec();
|
||||
|
||||
query
|
||||
.selectAll('.tab-item1')
|
||||
.boundingClientRect((rects) => {
|
||||
this.scrollLeft2_widths = rects.map((rect) => rect.width);
|
||||
})
|
||||
.exec();
|
||||
},
|
||||
// 处理选项卡点击
|
||||
page5handleTabClick(index, key) {
|
||||
this.$emit('change', { index, key });
|
||||
if (index == -1) {
|
||||
this.all = true;
|
||||
} else {
|
||||
this.all = false;
|
||||
this[key] = index;
|
||||
|
||||
if (key == 'nav_active_index') {
|
||||
// 重置二级分类的索引和滚动条位置
|
||||
|
||||
// 检查是否有二级分类
|
||||
let arr = this.category_list[this.nav_active_index].items;
|
||||
|
||||
this.nav_active_item_two_index = arr.length ? 0 : -1;
|
||||
this.scrollLeft1 = 0;
|
||||
|
||||
// 计算需要滚动的距离使目标选项卡居中
|
||||
let scrollLeft = 0;
|
||||
for (let i = 0; i < index; i++) {
|
||||
scrollLeft += this.scrollLeft1_widths[i] || 0;
|
||||
}
|
||||
|
||||
// 获取容器宽度和当前选项卡宽度
|
||||
const containerWidth = uni.getSystemInfoSync().windowWidth - 50;
|
||||
const currentTabWidth = this.scrollLeft1_widths[index] || 0;
|
||||
|
||||
// 计算居中偏移量
|
||||
scrollLeft = scrollLeft + currentTabWidth / 2 - containerWidth / 2;
|
||||
|
||||
// 确保滚动距离不小于0
|
||||
scrollLeft = Math.max(0, scrollLeft);
|
||||
|
||||
// 设置滚动位置
|
||||
this.scrollLeft1 = scrollLeft;
|
||||
}
|
||||
|
||||
if (key == 'nav_active_item_two_index') {
|
||||
// 计算需要滚动的距离使目标选项卡居中
|
||||
let scrollLeft = 0;
|
||||
for (let i = 0; i < index; i++) {
|
||||
scrollLeft += this.scrollLeft2_widths[i] || 0;
|
||||
}
|
||||
|
||||
// 获取容器宽度和当前选项卡宽度
|
||||
const containerWidth = uni.getSystemInfoSync().windowWidth - 50;
|
||||
const currentTabWidth = this.scrollLeft2_widths[index] || 0;
|
||||
|
||||
// 计算居中偏移量
|
||||
scrollLeft = scrollLeft + currentTabWidth / 2 - containerWidth / 2;
|
||||
|
||||
// 确保滚动距离不小于0
|
||||
scrollLeft = Math.max(0, scrollLeft);
|
||||
|
||||
// 设置滚动位置
|
||||
this.scrollLeft2 = scrollLeft;
|
||||
}
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initTabWidths();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.category-wrap {
|
||||
$padding: 28upx;
|
||||
width: 100%;
|
||||
.scroll-wrap {
|
||||
display: flex;
|
||||
.scroll {
|
||||
width: 640upx;
|
||||
&.short {
|
||||
width: 600upx;
|
||||
}
|
||||
}
|
||||
.more {
|
||||
flex-shrink: 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.scroll {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
.item {
|
||||
display: inline-block;
|
||||
padding: $padding 0 $padding $padding;
|
||||
&:last-child {
|
||||
padding-right: $padding;
|
||||
}
|
||||
&.active {
|
||||
.t {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
.t {
|
||||
font-size: 28upx;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.img {
|
||||
$size: 82upx;
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
.t {
|
||||
font-size: 24upx;
|
||||
margin-top: 12upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user