新增首页模板
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