This commit is contained in:
1173117610@qq.com
parent
5160c52ad4
commit
69eba4ef69
|
|
@ -12,15 +12,15 @@
|
|||
</view>
|
||||
<scroll-view scroll-x class="nav-scroll" :show-scrollbar="false">
|
||||
<view class="nav-item" :class="{ 'active': currentTab === index }" v-for="(item, index) in navList" :key="index" @click="switchTab(index)">
|
||||
<text class="nav-text">{{ item }}</text>
|
||||
<text class="nav-text">{{ item.name }}</text>
|
||||
<view class="nav-line" v-if="currentTab === index"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="main-content" :show-scrollbar="false">
|
||||
<scroll-view scroll-y class="main-content" :show-scrollbar="false" :scroll-into-view="scrollTarget" scroll-with-animation>
|
||||
<!-- 轮播图区域 -->
|
||||
<view class="banner-box">
|
||||
<view class="banner-box" id="top-section">
|
||||
<swiper class="swiper" circular autoplay indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#ffffff">
|
||||
<swiper-item v-for="(img, idx) in banners" :key="idx">
|
||||
<image class="banner-img" :src="img" mode="aspectFill"></image>
|
||||
|
|
@ -203,7 +203,7 @@
|
|||
</view>
|
||||
|
||||
<!-- 商品列表 (1:1 还原) -->
|
||||
<view class="goods-list">
|
||||
<view class="goods-list" id="goods-list-section">
|
||||
<view class="goods-item" v-for="(goods, idx) in goodsList" :key="idx">
|
||||
<view class="g-img-wrap">
|
||||
<view class="g-anniversary-tag">
|
||||
|
|
@ -242,7 +242,8 @@
|
|||
data() {
|
||||
return {
|
||||
currentTab: 0,
|
||||
navList: ['精选', '女装', '美食', '美妆', '母婴', '鞋包', '居家', '数码'],
|
||||
navList: [{ name: '首页', cat_id: 0 }, { name: '推荐', cat_id: -1 }],
|
||||
scrollTarget: '',
|
||||
banners: [
|
||||
'https://images.unsplash.com/photo-1483985988355-763728e1935b?w=800&q=80',
|
||||
'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=800&q=80',
|
||||
|
|
@ -284,6 +285,7 @@
|
|||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getCategoryList();
|
||||
this.getNoticeList();
|
||||
this.getGoodsList();
|
||||
this.getWorthBuyLists();
|
||||
|
|
@ -306,6 +308,16 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
getCategoryList() {
|
||||
uni.request({
|
||||
url: 'https://api.cmspro.haodanku.com/index/category?cid=qOstW90',
|
||||
success: (res) => {
|
||||
if (res.data && res.data.code === 200 && res.data.data.category) {
|
||||
this.navList = [{ name: '首页', cat_id: 0 }, { name: '推荐', cat_id: -1 }, ...res.data.data.category];
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getNoticeList() {
|
||||
uni.request({
|
||||
url: 'https://api.cmspro.haodanku.com/msg/getMsgs?cid=qOstW90',
|
||||
|
|
@ -396,6 +408,16 @@
|
|||
},
|
||||
switchTab(index) {
|
||||
this.currentTab = index;
|
||||
const tabName = this.navList[index].name;
|
||||
|
||||
this.scrollTarget = ''; // 重置目标，确保下次点击仍能触发滚动
|
||||
this.$nextTick(() => {
|
||||
if (tabName === '推荐') {
|
||||
this.scrollTarget = 'goods-list-section';
|
||||
} else if (tabName === '首页') {
|
||||
this.scrollTarget = 'top-section';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1137,24 +1159,23 @@
|
|||
}
|
||||
|
||||
.brand-name-row {
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.brand-name-row .arrow {
|
||||
margin-left: 10rpx;
|
||||
font-size: 24rpx;
|
||||
margin-left: 8rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.brand-discount-text {
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 12rpx;
|
||||
font-weight: 500;
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 14rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.brand-promo-tags {
|
||||
|
|
@ -1162,7 +1183,7 @@
|
|||
}
|
||||
|
||||
.p-tag {
|
||||
background: rgba(0,0,0,0.3);
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
|
|
|
|||
Loading…
Reference in New Issue