Skip to content

飞
飞鹤小程序
Commit a75aa493 authored by 王炽's avatar 王炽
Browse files
Options

添加星妈优选页签

parent 3040a826
Hide whitespace changes
Inline Side-by-side
Showing with 965 additions and 519 deletions
.DS_Store
View file @ a75aa493
No preview for this file type
components/ScrollableTabs.vue 0 → 100644
View file @ a75aa493
<template>
<view class="scrollable-tabs">
<scroll-view
class="tabs-scroll"
scroll-x="true"
show-scrollbar="false"
:scroll-into-view="'tab-' + currentIndex"
:scroll-with-animation="true"
>
<view class="tabs-container">
<view
v-for="(item, index) in tabs"
:key="index"
:id="'tab-' + index"
class="tab-item"
:class="{ 'tab-active': currentIndex === index }"
@tap="handleTabClick(index)"
>
{{ item }}
</view>
</view>
</scroll-view>
</view>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
tabs: {
type: Array,
default: () => []
},
currentIndex: {
type: Number,
default: 0
}
})
const emit = defineEmits(['change'])
const handleTabClick = (index) => {
emit('change', index)
}
</script>
<style lang="less" scoped>
.scrollable-tabs {
width: 100%;
.tabs-scroll {
width: 100%;
white-space: nowrap;
.tabs-container {
display: flex;
align-items: center;
padding: 0 20rpx;
min-width: 100%;
.tab-item {
color: #333;
background-color: #e9edf1;
padding: 15rpx 20rpx;
font-size: 22rpx;
margin-right: 15rpx;
border-radius: 30rpx;
flex-shrink: 0;
white-space: nowrap;
transition: all 0.3s ease;
&:last-child {
margin-right: 0;
}
&.tab-active {
color: white;
background-color: #D3A358;
}
}
}
}
}
/* 响应式设计 */
@media screen and (max-width: 750rpx) {
.scrollable-tabs {
.tabs-scroll {
.tabs-container {
.tab-item {
padding: 12rpx 16rpx;
font-size: 20rpx;
margin-right: 12rpx;
}
}
}
}
}
</style>
\ No newline at end of file
docs/可滚动标签实现指南.md 0 → 100644
View file @ a75aa493
# 可滚动标签实现指南
## 问题描述
当标签项（tabitem）总宽度超出父容器宽度时，需要实现左右滑动功能，让用户能够查看所有标签。
## 解决方案
### 方案一：修改现有代码（已实现）
#### 1. 修改模板结构
```vue
<scroll-view class="listbox" scroll-x="true" show-scrollbar="false" :scroll-into-view="'tab-' + channelTabIndex">
<view class="tab-container">
<view
v-for="(item, index) in productTabList"
:key="index"
:id="'tab-' + index"
:class="channelTabIndex === index ? 'tabitem tabActive' : 'tabitem'"
@tap="channelTabHandler(index, $event)"
>
{{ item }}
</view>
</view>
</scroll-view>
```
#### 2. 修改样式
```css
.listbox {
margin-top: 15rpx;
width: 686rpx;
white-space: nowrap;
.tab-container {
display: flex;
align-items: center;
padding: 0 20rpx;
min-width: 100%;
.tabitem {
color: @color-black-deep;
background-color: #e9edf1;
padding: 15rpx 20rpx;
font-size: 22rpx;
margin-right: 15rpx;
border-radius: 30rpx;
flex-shrink: 0; /* 防止压缩 */
white-space: nowrap; /* 防止换行 */
&:last-child {
margin-right: 0;
}
}
.tabActive {
color: white;
background-color: @color-gold-main;
}
}
}
```
### 方案二：使用可复用组件（推荐）
#### 1. 使用 ScrollableTabs 组件
```vue
<template>
<view class="productcontai">
<text class="maintitle">{{ erqiPeizhi.title1 }}</text>
<ScrollableTabs
:tabs="productTabList"
:currentIndex="channelTabIndex"
@change="handleTabChange"
/>
</view>
</template>
<script setup>
import ScrollableTabs from '../components/ScrollableTabs.vue'
const handleTabChange = (index) => {
channelTabIndex.value = index
}
</script>
```
## 关键属性说明
### 1. scroll-view 属性
```vue
<scroll-view
scroll-x="true" <!-- 启用横向滚动 -->
show-scrollbar="false" <!-- 隐藏滚动条 -->
:scroll-into-view="'tab-' + currentIndex" <!-- 自动滚动到指定元素 -->
:scroll-with-animation="true" <!-- 启用滚动动画 -->
>
```
### 2. 样式关键属性
```css
/* 容器样式 */
.listbox {
white-space: nowrap; /* 防止换行 */
}
.tab-container {
display: flex; /* 弹性布局 */
min-width: 100%; /* 最小宽度 */
padding: 0 20rpx; /* 左右内边距 */
}
.tabitem {
flex-shrink: 0; /* 防止压缩 */
white-space: nowrap; /* 防止换行 */
margin-right: 15rpx; /* 右边距 */
}
```
## 实现效果
### 功能特性
- ✅ 支持横向滚动
- ✅ 自动滚动到选中项
- ✅ 隐藏滚动条
- ✅ 平滑滚动动画
- ✅ 响应式设计
- ✅ 防止标签压缩
### 用户体验
- 当标签总宽度超出容器时，可以左右滑动查看
- 点击标签时自动滚动到可见区域
- 滚动过程平滑自然
- 适配不同屏幕尺寸
## 最佳实践
### 1. 标签间距设置
```css
.tabitem {
margin-right: 15rpx; /* 标签间距 */
&:last-child {
margin-right: 0; /* 最后一个标签无右边距 */
}
}
```
### 2. 容器内边距
```css
.tab-container {
padding: 0 20rpx; /* 左右留出空间 */
}
```
### 3. 防止压缩
```css
.tabitem {
flex-shrink: 0; /* 防止标签被压缩 */
white-space: nowrap; /* 防止文字换行 */
}
```
### 4. 自动滚动
```vue
:scroll-into-view="'tab-' + currentIndex"
```
## 常见问题解决
### 1. 滚动不生效
- 检查 `scroll-x="true"` 是否设置
- 确认容器宽度小于内容宽度
- 检查 `flex-shrink: 0` 是否设置
### 2. 标签被压缩
- 添加 `flex-shrink: 0`
- 设置 `white-space: nowrap`
### 3. 滚动条显示
- 设置 `show-scrollbar="false"`
### 4. 自动滚动不工作
- 确认 `scroll-into-view` 的 ID 正确
- 检查元素 ID 是否唯一
## 响应式设计
### 移动端优化
```css
@media screen and (max-width: 750rpx) {
.tabitem {
padding: 12rpx 16rpx; /* 减小内边距 */
font-size: 20rpx; /* 减小字体 */
margin-right: 12rpx; /* 减小间距 */
}
}
```
### 平板端优化
```css
@media screen and (min-width: 751rpx) and (max-width: 1024rpx) {
.tab-container {
padding: 0 30rpx; /* 增加内边距 */
}
}
```
## 性能优化
### 1. 使用 transform 动画
```css
.tabitem {
transition: all 0.3s ease;
}
```
### 2. 避免频繁重绘
```css
.tab-container {
will-change: transform; /* 优化滚动性能 */
}
```
### 3. 合理设置滚动阈值
```vue
<scroll-view
:scroll-into-view="shouldScroll ? 'tab-' + currentIndex : ''"
>
```
## 总结
通过以上实现，标签列表现在支持：
1. **横向滚动**：当标签总宽度超出容器时自动启用
2. **自动定位**：点击标签时自动滚动到可见区域
3. **平滑动画**：滚动过程自然流畅
4. **响应式设计**：适配不同屏幕尺寸
5. **性能优化**：避免不必要的重绘和计算
这种实现方式既保持了原有功能，又提供了更好的用户体验，特别适合标签数量较多或标签文字较长的场景。
\ No newline at end of file
views/Brand.vue
View file @ a75aa493
......@@ -46,16 +46,18 @@
</view>
<view id="secondScreen" class="productcontai">
<text class="maintitle">{{ erqiPeizhi.title1 }}</text>
<view class="listbox">
<view @tap="channelTabHandler(index, $event)" :data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-次屏页面',
buttonName: `${item}`
}" :class="channelTabIndex === index ? 'tabitem tabActive' : 'tabitem'" v-for="(item, index) in productTabList"
:key="index">
{{ item }}
<scroll-view class="listbox" scroll-x="true" show-scrollbar="false" :scroll-into-view="'tab-' + channelTabIndex" :scroll-with-animation="true">
<view class="tab-container">
<view @tap="channelTabHandler(index, $event)" :data-log="{
xcxClick: '品牌故事-次屏页面点击',
pageName: '品牌故事-次屏页面',
buttonName: `${item}`
}" :class="channelTabIndex === index ? 'tabitem tabActive' : 'tabitem'" v-for="(item, index) in productTabList"
:key="index" :id="'tab-' + index">
{{ item }}
</view>
</view>
</view>
</scroll-view>
<scroll-view v-if="productInfoList.length > 0" class="productbox" scroll-x="true"
show-scrollbar="false">
<view class="product-grid">
......@@ -331,501 +333,576 @@ export default {
},
methods: {
async initBrandInfo() {
const { data } = await fetchBrandJSON();
// const data = {
// "erqiPeizhi":{
// "title1":"飞鹤产品家族",
// "title2":"飞鹤品牌IP鹤小飞一家",
// "title3":"飞鹤ESG",
// "iphexiaofeiUrl":"https://course.feihe.com/momclub-picture/brandpage/iphexiaofei.png",
// "ipImg1":"https://course.feihe.com/momclub-picture/brandpage/ip1.png",
// "ipImg2":"https://course.feihe.com/momclub-picture/brandpage/ip2.png",
// "ipImg3":"https://course.feihe.com/momclub-picture/brandpage/ip3.png",
// "ipImg4":"https://course.feihe.com/momclub-picture/brandpage/ip4.png"
// },
// "swiperList": [
// {
// "videoUrl": "https://course.feihe.com/momclub-picture/brandpage/bannerVideo.mp4",
// "link": {},
// "url": "brandpage/Banner31.png"
// },
// {
// "link": {
// "extra": {},
// "type": 3,
// "url": "https://mp.weixin.qq.com/s/0eMxbWB3R_0g06HZPUEj5Q"
// },
// "url": "brandpage/Banner32.png"
// },
// {
// "videoUrl": "https://course.feihe.com/momclub-picture/brandpage/bannerVideoHeitu.mp4",
// "link": {},
// "url": "brandpage/Banner33.png"
// },
// {
// "link": {
// "extra": {},
// "type": 3,
// "url": "https://factory.feihe.com/user/#/web"
// },
// "url": "brandpage/Banner34.png"
// }],
// "product": [
// [
// {
// "productId": "",
// "shareTitle": "星飞帆经典 3段",
// "link": "www.baidu.com",
// "contentImgLen": 20,
// "title": "超凡 吸收",
// "skuId": "",
// "shareImg": "brandpage/products/share/0/0_1.jpg",
// "contentImg": "0-1",
// "desc": "星飞帆经典 3段",
// "bgUrl": "brandpage/pic_0_1.png"
// },
// {
// "productId": "",
// "shareTitle": "星飞帆卓睿 3段",
// "link": "www.baidu.com",
// "contentImgLen": 25,
// "title": "顶配 脑育",
// "skuId": "",
// "shareImg": "brandpage/products/share/0/0_2.jpg",
// "contentImg": "0-2",
// "desc": "星飞帆卓睿 3段",
// "bgUrl": "brandpage/pic_0_2.png"
// },
// {
// "productId": "",
// "shareTitle": "星飞帆卓耀 3段",
// "link": "www.baidu.com",
// "contentImgLen": 28,
// "title": "亲和 自护",
// "skuId": "",
// "shareImg": "brandpage/products/share/0/0_3.jpg",
// "contentImg": "0-3",
// "desc": "星飞帆卓耀 3段",
// "bgUrl": "brandpage/pic_0_3.png"
// },
// {
// "productId": "749098220531287139",
// "shareTitle": "爱本跃动蛋白营养粉",
// "link": "www.baidu.com",
// "contentImgLen": 15,
// "title": " 4维 效力",
// "skuId": "749098220531287140",
// "shareImg": "brandpage/products/share/0/0_4.jpg",
// "contentImg": "0-4",
// "desc": "爱本跃动蛋白营养粉",
// "bgUrl": "brandpage/pic_0_4.png"
// },
// {
// "productId": "693279214116405585",
// "shareTitle": "高钙奶酪泡芙脆",
// "link": "www.baidu.com",
// "contentImgLen": 15,
// "title": "高钙 爆脆",
// "skuId": "693279214116405586",
// "shareImg": "brandpage/products/share/0/0_5.jpg",
// "contentImg": "0-5",
// "desc": "高钙奶酪泡芙脆",
// "bgUrl": "brandpage/pic_0_5.png"
// },
// {
// "productId": "555503303308649561",
// "shareTitle": "北纬47度黄糯玉米",
// "link": "www.baidu.com",
// "contentImgLen": 5,
// "title": "软糯 Q弹",
// "skuId": "555503303308649562",
// "shareImg": "brandpage/products/share/0/0_6.jpg",
// "contentImg": "0-6",
// "desc": "北纬47度黄糯玉米",
// "bgUrl": "brandpage/pic_0_6.png"
// }
// ],
// [
// {
// "productId": "",
// "shareTitle": "星飞帆经典 3段",
// "link": "www.baidu.com",
// "contentImgLen": 20,
// "title": "超凡 吸收",
// "skuId": "",
// "shareImg": "brandpage/products/share/1/1_1.jpg",
// "contentImg": "1-1",
// "desc": "星飞帆经典 3段",
// "bgUrl": "brandpage/pic_1_1.png"
// },
// {
// "productId": "",
// "shareTitle": "星飞帆卓睿 3段",
// "link": "www.baidu.com",
// "contentImgLen": 25,
// "title": "顶配 脑育",
// "skuId": "",
// "shareImg": "brandpage/products/share/1/1_2.jpg",
// "contentImg": "1-2",
// "desc": "星飞帆卓睿 3段",
// "bgUrl": "brandpage/pic_1_2.png"
// },
// {
// "productId": "",
// "shareTitle": "星飞帆卓耀 3段",
// "link": "www.baidu.com",
// "contentImgLen": 28,
// "title": "亲和 自护",
// "skuId": "",
// "shareImg": "brandpage/products/share/1/1_3.jpg",
// "contentImg": "1-3",
// "desc": "星飞帆卓耀 3段",
// "bgUrl": "brandpage/pic_1_3.png"
// },
// {
// "productId": "",
// "shareTitle": "星飞帆卓睿A2奶源",
// "link": "www.baidu.com",
// "contentImgLen": 20,
// "title": "顶配 A 2",
// "skuId": "",
// "shareImg": "brandpage/products/share/1/1_4.jpg",
// "contentImg": "1-4",
// "desc": "星飞帆卓睿A2奶源",
// "bgUrl": "brandpage/pic_1_4.png"
// },
// {
// "productId": "",
// "shareTitle": "臻稚卓蓓 3段",
// "link": "www.baidu.com",
// "contentImgLen": 28,
// "title": "活性 有机",
// "skuId": "",
// "shareImg": "brandpage/products/share/1/1_5.jpg",
// "contentImg": "1-5",
// "desc": "臻稚卓蓓 3段",
// "bgUrl": "brandpage/pic_1_5.png"
// },
// {
// "productId": "",
// "shareTitle": "臻爱倍护 3段",
// "link": "www.baidu.com",
// "contentImgLen": 20,
// "title": "高端 乳铁",
// "skuId": "",
// "shareImg": "brandpage/products/share/1/1_6.jpg",
// "contentImg": "1-6",
// "desc": "臻爱倍护 3段",
// "bgUrl": "brandpage/pic_1_6.png"
// }
// ],
// [
// {
// "productId": "749098220531287139",
// "shareTitle": "爱本跃动蛋白营养粉",
// "link": "www.baidu.com",
// "contentImgLen": 20,
// "title": " 4维 效力",
// "skuId": "749098220531287140",
// "shareImg": "brandpage/products/share/2/2_1.jpg",
// "contentImg": "2-1",
// "desc": "爱本跃动蛋白营养粉",
// "bgUrl": "brandpage/pic_2_1.png"
// },
// {
// "productId": "748659115456528889",
// "shareTitle": "爱本牛初乳",
// "link": "www.baidu.com",
// "contentImgLen": 15,
// "title": "初乳 精华",
// "skuId": "7748659115456528890",
// "shareImg": "brandpage/products/share/2/2_2.jpg",
// "contentImg": "2-2",
// "desc": "爱本牛初乳",
// "bgUrl": "brandpage/pic_2_2.png"
// },
// {
// "productId": "768991288915277214",
// "shareTitle": "爱本每日蛋白营养糊",
// "link": "www.baidu.com",
// "contentImgLen": 15,
// "title": "每日 蛋白",
// "skuId": "768991288915277215",
// "shareImg": "brandpage/products/share/2/2_3.jpg",
// "contentImg": "2-3",
// "desc": "爱本每日蛋白营养糊",
// "bgUrl": "brandpage/pic_2_3.png"
// },
// {
// "productId": "767546274051183809",
// "shareTitle": "爱本纤纤益生菌羽衣甘蓝蛋白粉",
// "link": "www.baidu.com",
// "contentImgLen": 10,
// "title": "腰腹 燃脂",
// "skuId": "767546274051183810",
// "shareImg": "brandpage/products/share/2/2_4.jpg",
// "contentImg": "2-4",
// "desc": "爱本纤纤益生菌\n羽衣甘蓝蛋白粉",
// "bgUrl": "brandpage/pic_2_4.png"
// },
// {
// "productId": "749443379821195324",
// "shareTitle": "爱本参芝初乳肽",
// "link": "www.baidu.com",
// "contentImgLen": 10,
// "title": "药食 同源",
// "skuId": "749443379821195325",
// "shareImg": "brandpage/products/share/2/2_5.jpg",
// "contentImg": "2-5",
// "desc": "爱本参芝初乳肽",
// "bgUrl": "brandpage/pic_2_5.png"
// },
// {
// "productId": "753354110711035152",
// "shareTitle": "爱本悦眠功能粉",
// "link": "www.baidu.com",
// "contentImgLen": 15,
// "title": "一夜 天亮",
// "skuId": "753354110711035153",
// "shareImg": "brandpage/products/share/2/2_6.jpg",
// "contentImg": "2-6",
// "desc": "爱本悦眠功能粉",
// "bgUrl": "brandpage/pic_2_6.png"
// }
// ],
// [
// {
// "productId": "759563658744492290",
// "shareTitle": "爱上吃菜乳酪",
// "link": "www.baidu.com",
// "contentImgLen": 10,
// "title": "高钙 高纤",
// "skuId": "759563658744492293",
// "shareImg": "brandpage/products/share/3/3_1.jpg",
// "contentImg": "3-1",
// "desc": "爱上吃菜乳酪",
// "bgUrl": "brandpage/pic_3_1.png"
// },
// {
// "productId": "693279214116405585",
// "shareTitle": "高钙奶酪泡芙脆",
// "link": "www.baidu.com",
// "contentImgLen": 15,
// "title": "高钙 爆脆",
// "skuId": "693279214116405586",
// "shareImg": "brandpage/products/share/3/3_2.jpg",
// "contentImg": "3-2",
// "desc": "高钙奶酪泡芙脆",
// "bgUrl": "brandpage/pic_3_2.png"
// },
// {
// "productId": "693279214116405585",
// "shareTitle": "高纤黑巧乳酪",
// "link": "www.baidu.com",
// "contentImgLen": 10,
// "title": "醇香 黑巧",
// "skuId": "693279214116405586",
// "shareImg": "brandpage/products/share/3/3_3.jpg",
// "contentImg": "3-3",
// "desc": "高纤黑巧乳酪",
// "bgUrl": "brandpage/pic_3_3.png"
// },
// {
// "productId": "716141706338247497",
// "shareTitle": "超新星水果奶酪",
// "link": "www.baidu.com",
// "contentImgLen": 15,
// "title": "10倍 奶钙",
// "skuId": "716141706338247498",
// "shareImg": "brandpage/products/share/3/3_4.jpg",
// "contentImg": "3-4",
// "desc": "超新星水果奶酪",
// "bgUrl": "brandpage/pic_3_4.png"
// },
// {
// "productId": "717871366421930449",
// "shareTitle": "厚切流心芝士片",
// "link": "www.baidu.com",
// "contentImgLen": 10,
// "title": "浓郁 爆浆",
// "skuId": "717871366421930450",
// "shareImg": "brandpage/products/share/3/3_5.jpg",
// "contentImg": "3-5",
// "desc": "厚切流心芝士片",
// "bgUrl": "brandpage/pic_3_5.png"
// },
// {
// "productId": "551135905055024574",
// "shareTitle": "嚼奶粉乳酪",
// "link": "www.baidu.com",
// "contentImgLen": 10,
// "title": "洁净 配方",
// "skuId": "596810081919086853",
// "shareImg": "brandpage/products/share/3/3_6.jpg",
// "contentImg": "3-6",
// "desc": "嚼奶粉乳酪",
// "bgUrl": "brandpage/pic_3_6.png"
// }
// ],
// [
// {
// "productId": "545768683314537529",
// "shareTitle": "北纬47度白甜糯玉米",
// "link": "www.baidu.com",
// "contentImgLen": 5,
// "title": "含有 叶酸",
// "skuId": "545770687080957074",
// "shareImg": "brandpage/products/share/4/4_1.jpg",
// "contentImg": "4-1",
// "desc": "北纬47度白甜糯玉米",
// "bgUrl": "brandpage/pic_4_1.png"
// },
// {
// "productId": "555503303308649561",
// "shareTitle": "北纬47度黄糯玉米",
// "link": "www.baidu.com",
// "contentImgLen": 5,
// "title": "软糯 Q弹",
// "skuId": "555503303308649562",
// "shareImg": "brandpage/products/share/4/4_2.jpg",
// "contentImg": "4-2",
// "desc": "北纬47度黄糯玉米",
// "bgUrl": "brandpage/pic_4_2.png"
// },
// {
// "productId": "469675861496440509",
// "shareTitle": "北纬47度低GI水果玉米粒袋装",
// "link": "www.baidu.com",
// "contentImgLen": 5,
// "title": "开袋 即食",
// "skuId": "469675861496440510",
// "shareImg": "brandpage/products/share/4/4_3.jpg",
// "contentImg": "4-3",
// "desc": "北纬47度低GI水果玉米粒袋装",
// "bgUrl": "brandpage/pic_4_3.png"
// },
// {
// "productId": "733411972814471679",
// "shareTitle": "北纬47度东北烧烤味玉米段",
// "link": "www.baidu.com",
// "contentImgLen": 5,
// "title": "秘制 工艺",
// "skuId": "733468301522154622",
// "shareImg": "brandpage/products/share/4/4_4.jpg",
// "contentImg": "4-4",
// "desc": "北纬47度东北烧烤味玉米段",
// "bgUrl": "brandpage/pic_4_4.png"
// },
// {
// "productId": "733411972814471679",
// "shareTitle": "N47°植物酵素乳",
// "link": "www.baidu.com",
// "contentImgLen": 10,
// "title": "0乳糖 低GI",
// "skuId": "733468301522154622",
// "shareImg": "brandpage/products/share/4/4_5.jpg",
// "contentImg": "4-5",
// "desc": "N47°植物酵素乳",
// "bgUrl": "brandpage/pic_4_5.png"
// },
// {
// "productId": "705230699873112222",
// "shareTitle": "N47°水果玉米汁",
// "link": "www.baidu.com",
// "contentImgLen": 8,
// "title": "轻卡 低GI",
// "skuId": "705230699873112223",
// "shareImg": "brandpage/products/share/4/4_6.jpg",
// "contentImg": "4-6",
// "desc": "N47°水果玉米汁",
// "bgUrl": "brandpage/pic_4_6.png"
// }
// ]
// ],
// "posterUrl": "https://course.feihe.com/momclub-picture/brandpage/videoposter.png",
// "videoPosterUrl": "https://course.feihe.com/momclub-picture/brandpage/banner_1%E6%85%A2%E4%BA%BA%E8%8A%82x%E9%A3%9E%E9%B9%A4%2B-%2B%E5%9C%9FFINAL.mp4",
// "videoUrl": "https://course.feihe.com/momclub-picture/brandpage/banner_1%E6%85%A2%E4%BA%BA%E8%8A%82x%E9%A3%9E%E9%B9%A4%2B-%2B%E5%9C%9FFINAL.mp4",
// "esgInfoList": [
// [
// {
// "desc2": "飞鹤践行低碳节能，打造绿色产业链；承担 龙头责任，引领行业创新发展；履行社会责 任，构建共富共享生态。",
// "link": {
// "extra": {},
// "type": 3,
// "url": "https://mp.weixin.qq.com/s/UebPA-2XenAdw7lTs2NttA"
// },
// "desc": "中国飞鹤发布2024年ESG报告",
// "bgUrl": "brandpage/esg1.png"
// },
// {
// "desc2": "中国飞鹤于2025年4月初在全国范围内启动 总规模为12亿元，为符合条件的孕期家庭提 供不少于1500元生育补贴的飞鹤生育补贴",
// "link": {
// "extra": {},
// "type": 3,
// "url": "https://mp.weixin.qq.com/s/TpjCyjCf2Df3t1RMfi-JKQ"
// },
// "desc": "12亿元生育补贴计划",
// "bgUrl": "brandpage/esg2.png"
// },
// {
// "desc2": "百年大计，教育为本；教育大计，教师为本。 近三年来，飞鹤已投入超过6500万元开展专 项助教活动，惠及在职专任教师超过28万人",
// "link": {
// "extra": {},
// "type": 3,
// "url": "https://mp.weixin.qq.com/s/fvo6LV95tCIPA_lda9L7zw"
// },
// "desc": "教育公益",
// "bgUrl": "brandpage/esg3.png"
// }
// ]
// ],
// "channel": {
// "finderUserName": "sphgexisAi0pRGm",
// "feedId": "export/UzFfAgtgekIEAQAAAAAABbEMmxr36QAAAAstQy6ubaLX4KHWvLEZgBPEgaJkYSYbLr6JzNPgMJp7tTZCYcYsIpU6Z0fgSnSE"
// },
// "qrInfoList": [
// {
// "qrUrl": "brandpage/qrhxf_sph.png",
// "title": "视频号",
// "desc": "扫码关注<span style='color:#D3A358;'>鹤小飞一家</span>视频号，看超多有爱的趣味故事"
// },
// {
// "qrUrl": "brandpage/qrhxf_wxxd.png",
// "title": "微信小店",
// "desc": "扫码进入<span style='color:#D3A358;'>鹤小飞一家</span>店铺，挑选精美限量周边"
// }
// ],
// "productTabList": [
// "全部",
// "母婴全阶",
// "功能营养",
// "儿童产品",
// "北纬47°"
// ],
// "swiperIconList": [
// {
// "text": "北纬47°生态",
// "baseUrl": "brandpage/corn1.png",
// "activeUrl": "brandpage/corn2.png"
// },
// {
// "text": "13家自有牧场",
// "baseUrl": "brandpage/cattle1.png",
// "activeUrl": "brandpage/cattle2.png"
// },
// {
// "text": "北纬47°有机黑土",
// "baseUrl": "brandpage/factory1.png",
// "activeUrl": "brandpage/factory2.png"
// }, {
// "text": "工厂游预约",
// "baseUrl": "brandpage/factory1.png",
// "activeUrl": "brandpage/factory2.png"
// }
// ],
// "ipDesc": "鹤小飞一家是由鹤爸、鹤妈、鹤小飞（哥哥）、鹤小小（妹妹） 组成的一家。\n四口热爱生活、积极向上，是他们一家对生活的态度。"
// };
// const { data } = await fetchBrandJSON();
const data = {
"erqiPeizhi":{
"title1":"飞鹤产品家族",
"title2":"飞鹤品牌IP鹤小飞一家",
"title3":"飞鹤ESG",
"iphexiaofeiUrl":"https://course.feihe.com/momclub-picture/brandpage/iphexiaofei.png",
"ipImg1":"https://course.feihe.com/momclub-picture/brandpage/ip1.png",
"ipImg2":"https://course.feihe.com/momclub-picture/brandpage/ip2.png",
"ipImg3":"https://course.feihe.com/momclub-picture/brandpage/ip3.png",
"ipImg4":"https://course.feihe.com/momclub-picture/brandpage/ip4.png"
},
"swiperList": [
{
"videoUrl": "https://course.feihe.com/momclub-picture/brandpage/bannerVideo.mp4",
"link": {},
"url": "brandpage/Banner31.png"
},
{
"link": {
"extra": {},
"type": 3,
"url": "https://mp.weixin.qq.com/s/0eMxbWB3R_0g06HZPUEj5Q"
},
"url": "brandpage/Banner32.png"
},
{
"videoUrl": "https://course.feihe.com/momclub-picture/brandpage/bannerVideoHeitu.mp4",
"link": {},
"url": "brandpage/Banner33.png"
},
{
"link": {
"extra": {},
"type": 3,
"url": "https://factory.feihe.com/user/#/web"
},
"url": "brandpage/Banner34.png"
}],
"product": [
[
{
"productId": "",
"shareTitle": "星飞帆经典 3段",
"link": "",
"contentImgLen": 20,
"title": "超凡 吸收",
"skuId": "",
"shareImg": "brandpage/products/share/0/0_1.jpg",
"contentImg": "0-1",
"desc": "星飞帆经典 3段",
"bgUrl": "brandpage/pic_0_1.png"
},
{
"productId": "",
"shareTitle": "星飞帆卓睿 3段",
"link": "",
"contentImgLen": 25,
"title": "顶配 脑育",
"skuId": "",
"shareImg": "brandpage/products/share/0/0_2.jpg",
"contentImg": "0-2",
"desc": "星飞帆卓睿 3段",
"bgUrl": "brandpage/pic_0_2.png"
},
{
"productId": "",
"shareTitle": "星飞帆卓耀 3段",
"link": "",
"contentImgLen": 28,
"title": "亲和 自护",
"skuId": "",
"shareImg": "brandpage/products/share/0/0_3.jpg",
"contentImg": "0-3",
"desc": "星飞帆卓耀 3段",
"bgUrl": "brandpage/pic_0_3.png"
},
{
"productId": "749098220531287139",
"shareTitle": "爱本跃动蛋白营养粉",
"link": "",
"contentImgLen": 15,
"title": " 4维 效力",
"skuId": "749098220531287140",
"shareImg": "brandpage/products/share/0/0_4.jpg",
"contentImg": "0-4",
"desc": "爱本跃动蛋白营养粉",
"bgUrl": "brandpage/pic_0_4.png"
},
{
"productId": "693279214116405585",
"shareTitle": "高钙奶酪泡芙脆",
"link": "",
"contentImgLen": 15,
"title": "高钙 爆脆",
"skuId": "693279214116405586",
"shareImg": "brandpage/products/share/0/0_5.jpg",
"contentImg": "0-5",
"desc": "高钙奶酪泡芙脆",
"bgUrl": "brandpage/pic_0_5.png"
},
{
"productId": "555503303308649561",
"shareTitle": "北纬47度黄糯玉米",
"link": "",
"contentImgLen": 5,
"title": "软糯 Q弹",
"skuId": "555503303308649562",
"shareImg": "brandpage/products/share/0/0_6.jpg",
"contentImg": "0-6",
"desc": "北纬47度黄糯玉米",
"bgUrl": "brandpage/pic_0_6.png"
}
],
[
{
"productId": "",
"shareTitle": "星飞帆经典 3段",
"link": "",
"contentImgLen": 20,
"title": "超凡 吸收",
"skuId": "",
"shareImg": "brandpage/products/share/1/1_1.jpg",
"contentImg": "1-1",
"desc": "星飞帆经典 3段",
"bgUrl": "brandpage/pic_1_1.png"
},
{
"productId": "",
"shareTitle": "星飞帆卓睿 3段",
"link": "",
"contentImgLen": 25,
"title": "顶配 脑育",
"skuId": "",
"shareImg": "brandpage/products/share/1/1_2.jpg",
"contentImg": "1-2",
"desc": "星飞帆卓睿 3段",
"bgUrl": "brandpage/pic_1_2.png"
},
{
"productId": "",
"shareTitle": "星飞帆卓耀 3段",
"link": "",
"contentImgLen": 28,
"title": "亲和 自护",
"skuId": "",
"shareImg": "brandpage/products/share/1/1_3.jpg",
"contentImg": "1-3",
"desc": "星飞帆卓耀 3段",
"bgUrl": "brandpage/pic_1_3.png"
},
{
"productId": "",
"shareTitle": "星飞帆卓睿A2奶源",
"link": "",
"contentImgLen": 20,
"title": "顶配 A 2",
"skuId": "",
"shareImg": "brandpage/products/share/1/1_4.jpg",
"contentImg": "1-4",
"desc": "星飞帆卓睿A2奶源",
"bgUrl": "brandpage/pic_1_4.png"
},
{
"productId": "",
"shareTitle": "臻稚卓蓓 3段",
"link": "",
"contentImgLen": 28,
"title": "活性 有机",
"skuId": "",
"shareImg": "brandpage/products/share/1/1_5.jpg",
"contentImg": "1-5",
"desc": "臻稚卓蓓 3段",
"bgUrl": "brandpage/pic_1_5.png"
},
{
"productId": "",
"shareTitle": "臻爱倍护 3段",
"link": "",
"contentImgLen": 20,
"title": "高端 乳铁",
"skuId": "",
"shareImg": "brandpage/products/share/1/1_6.jpg",
"contentImg": "1-6",
"desc": "臻爱倍护 3段",
"bgUrl": "brandpage/pic_1_6.png"
}
],
[
{
"productId": "749098220531287139",
"shareTitle": "爱本跃动蛋白营养粉",
"link": "",
"contentImgLen": 20,
"title": " 4维 效力",
"skuId": "749098220531287140",
"shareImg": "brandpage/products/share/2/2_1.jpg",
"contentImg": "2-1",
"desc": "爱本跃动蛋白营养粉",
"bgUrl": "brandpage/pic_2_1.png"
},
{
"productId": "748659115456528889",
"shareTitle": "爱本牛初乳",
"link": "",
"contentImgLen": 15,
"title": "初乳 精华",
"skuId": "7748659115456528890",
"shareImg": "brandpage/products/share/2/2_2.jpg",
"contentImg": "2-2",
"desc": "爱本牛初乳",
"bgUrl": "brandpage/pic_2_2.png"
},
{
"productId": "768991288915277214",
"shareTitle": "爱本每日蛋白营养糊",
"link": "",
"contentImgLen": 15,
"title": "每日 蛋白",
"skuId": "768991288915277215",
"shareImg": "brandpage/products/share/2/2_3.jpg",
"contentImg": "2-3",
"desc": "爱本每日蛋白营养糊",
"bgUrl": "brandpage/pic_2_3.png"
},
{
"productId": "767546274051183809",
"shareTitle": "爱本纤纤益生菌羽衣甘蓝蛋白粉",
"link": "",
"contentImgLen": 10,
"title": "腰腹 燃脂",
"skuId": "767546274051183810",
"shareImg": "brandpage/products/share/2/2_4.jpg",
"contentImg": "2-4",
"desc": "爱本纤纤益生菌\n羽衣甘蓝蛋白粉",
"bgUrl": "brandpage/pic_2_4.png"
},
{
"productId": "749443379821195324",
"shareTitle": "爱本参芝初乳肽",
"link": "",
"contentImgLen": 10,
"title": "药食 同源",
"skuId": "749443379821195325",
"shareImg": "brandpage/products/share/2/2_5.jpg",
"contentImg": "2-5",
"desc": "爱本参芝初乳肽",
"bgUrl": "brandpage/pic_2_5.png"
},
{
"productId": "753354110711035152",
"shareTitle": "爱本悦眠功能粉",
"link": "",
"contentImgLen": 15,
"title": "一夜 天亮",
"skuId": "753354110711035153",
"shareImg": "brandpage/products/share/2/2_6.jpg",
"contentImg": "2-6",
"desc": "爱本悦眠功能粉",
"bgUrl": "brandpage/pic_2_6.png"
}
],
[
{
"productId": "759563658744492290",
"shareTitle": "爱上吃菜乳酪",
"link": "",
"contentImgLen": 10,
"title": "高钙 高纤",
"skuId": "759563658744492293",
"shareImg": "brandpage/products/share/3/3_1.jpg",
"contentImg": "3-1",
"desc": "爱上吃菜乳酪",
"bgUrl": "brandpage/pic_3_1.png"
},
{
"productId": "693279214116405585",
"shareTitle": "高钙奶酪泡芙脆",
"link": "",
"contentImgLen": 15,
"title": "高钙 爆脆",
"skuId": "693279214116405586",
"shareImg": "brandpage/products/share/3/3_2.jpg",
"contentImg": "3-2",
"desc": "高钙奶酪泡芙脆",
"bgUrl": "brandpage/pic_3_2.png"
},
{
"productId": "693279214116405585",
"shareTitle": "高纤黑巧乳酪",
"link": "",
"contentImgLen": 10,
"title": "醇香 黑巧",
"skuId": "693279214116405586",
"shareImg": "brandpage/products/share/3/3_3.jpg",
"contentImg": "3-3",
"desc": "高纤黑巧乳酪",
"bgUrl": "brandpage/pic_3_3.png"
},
{
"productId": "716141706338247497",
"shareTitle": "超新星水果奶酪",
"link": "",
"contentImgLen": 15,
"title": "10倍 奶钙",
"skuId": "716141706338247498",
"shareImg": "brandpage/products/share/3/3_4.jpg",
"contentImg": "3-4",
"desc": "超新星水果奶酪",
"bgUrl": "brandpage/pic_3_4.png"
},
{
"productId": "717871366421930449",
"shareTitle": "厚切流心芝士片",
"link": "",
"contentImgLen": 10,
"title": "浓郁 爆浆",
"skuId": "717871366421930450",
"shareImg": "brandpage/products/share/3/3_5.jpg",
"contentImg": "3-5",
"desc": "厚切流心芝士片",
"bgUrl": "brandpage/pic_3_5.png"
},
{
"productId": "551135905055024574",
"shareTitle": "嚼奶粉乳酪",
"link": "",
"contentImgLen": 10,
"title": "洁净 配方",
"skuId": "596810081919086853",
"shareImg": "brandpage/products/share/3/3_6.jpg",
"contentImg": "3-6",
"desc": "嚼奶粉乳酪",
"bgUrl": "brandpage/pic_3_6.png"
}
],
[
{
"productId": "545768683314537529",
"shareTitle": "北纬47度白甜糯玉米",
"link": "",
"contentImgLen": 5,
"title": "含有 叶酸",
"skuId": "545770687080957074",
"shareImg": "brandpage/products/share/4/4_1.jpg",
"contentImg": "4-1",
"desc": "北纬47度白甜糯玉米",
"bgUrl": "brandpage/pic_4_1.png"
},
{
"productId": "555503303308649561",
"shareTitle": "北纬47度黄糯玉米",
"link": "",
"contentImgLen": 5,
"title": "软糯 Q弹",
"skuId": "555503303308649562",
"shareImg": "brandpage/products/share/4/4_2.jpg",
"contentImg": "4-2",
"desc": "北纬47度黄糯玉米",
"bgUrl": "brandpage/pic_4_2.png"
},
{
"productId": "469675861496440509",
"shareTitle": "北纬47度低GI水果玉米粒袋装",
"link": "",
"contentImgLen": 5,
"title": "开袋 即食",
"skuId": "469675861496440510",
"shareImg": "brandpage/products/share/4/4_3.jpg",
"contentImg": "4-3",
"desc": "北纬47度低GI水果玉米粒袋装",
"bgUrl": "brandpage/pic_4_3.png"
},
{
"productId": "733411972814471679",
"shareTitle": "北纬47度东北烧烤味玉米段",
"link": "",
"contentImgLen": 5,
"title": "秘制 工艺",
"skuId": "733468301522154622",
"shareImg": "brandpage/products/share/4/4_4.jpg",
"contentImg": "4-4",
"desc": "北纬47度东北烧烤味玉米段",
"bgUrl": "brandpage/pic_4_4.png"
},
{
"productId": "733411972814471679",
"shareTitle": "N47°植物酵素乳",
"link": "",
"contentImgLen": 10,
"title": "0乳糖 低GI",
"skuId": "733468301522154622",
"shareImg": "brandpage/products/share/4/4_5.jpg",
"contentImg": "4-5",
"desc": "N47°植物酵素乳",
"bgUrl": "brandpage/pic_4_5.png"
},
{
"productId": "705230699873112222",
"shareTitle": "N47°水果玉米汁",
"link": "",
"contentImgLen": 8,
"title": "轻卡 低GI",
"skuId": "705230699873112223",
"shareImg": "brandpage/products/share/4/4_6.jpg",
"contentImg": "4-6",
"desc": "N47°水果玉米汁",
"bgUrl": "brandpage/pic_4_6.png"
}
],
[
{
"productId": "739634042657637394",
"shareTitle": "飞鹤臻贵儿童配方奶粉",
"link": "",
"contentImgLen": 10,
"title": "向上 成长",
"skuId": "739635029460743612",
"shareImg": "brandpage/products/share/4/4_1.jpg",
"contentImg": "5-1",
"desc": "飞鹤臻贵儿童配方奶粉",
"bgUrl": "brandpage/pic_4_1.png"
},
{
"productId": "770087385697019251",
"shareTitle": "飞鹤臻贵悦智配方奶粉",
"link": "",
"contentImgLen": 10,
"title": "悦享 活力",
"skuId": "770087385697019252",
"shareImg": "brandpage/products/share/4/4_2.jpg",
"contentImg": "4-2",
"desc": "飞鹤臻贵悦智配方奶粉",
"bgUrl": "brandpage/pic_4_2.png"
},
{
"productId": "584206109842248681",
"shareTitle": "飞鹤牧场浓厚纯牛奶",
"link": "",
"contentImgLen": 10,
"title": "浓厚 醇香",
"skuId": "743707906122896598",
"shareImg": "brandpage/products/share/4/4_3.jpg",
"contentImg": "4-3",
"desc": "飞鹤牧场浓厚纯牛奶",
"bgUrl": "brandpage/pic_4_3.png"
},
{
"productId": "411619746805715934",
"shareTitle": "六水香长粒香大米",
"link": "",
"contentImgLen": 8,
"title": "当季 新米",
"skuId": "411619746805715935",
"shareImg": "brandpage/products/share/4/4_4.jpg",
"contentImg": "4-4",
"desc": "六水香长粒香大米",
"bgUrl": "brandpage/pic_4_4.png"
},
{
"productId": "675921531863073227",
"shareTitle": "红富士晒晒苹果肉",
"link": "",
"contentImgLen": 10,
"title": "三蒸 三晒",
"skuId": "675921531863073230",
"shareImg": "brandpage/products/share/4/4_5.jpg",
"contentImg": "4-5",
"desc": "红富士晒晒苹果肉",
"bgUrl": "brandpage/pic_4_5.png"
},
{
"productId": "599340570081015525",
"shareTitle": "内衣专护洗衣液",
"link": "",
"contentImgLen":11,
"title": "深层 洁净",
"skuId": "599340570081015526",
"shareImg": "brandpage/products/share/4/4_6.jpg",
"contentImg": "4-6",
"desc": "内衣专护洗衣液",
"bgUrl": "brandpage/pic_4_6.png"
}
]
],
"posterUrl": "https://course.feihe.com/momclub-picture/brandpage/videoposter.png",
"videoPosterUrl": "https://course.feihe.com/momclub-picture/brandpage/banner_1%E6%85%A2%E4%BA%BA%E8%8A%82x%E9%A3%9E%E9%B9%A4%2B-%2B%E5%9C%9FFINAL.mp4",
"videoUrl": "https://course.feihe.com/momclub-picture/brandpage/banner_1%E6%85%A2%E4%BA%BA%E8%8A%82x%E9%A3%9E%E9%B9%A4%2B-%2B%E5%9C%9FFINAL.mp4",
"esgInfoList": [
[
{
"desc2": "飞鹤践行低碳节能，打造绿色产业链；承担 龙头责任，引领行业创新发展；履行社会责 任，构建共富共享生态。",
"link": {
"extra": {},
"type": 3,
"url": "https://mp.weixin.qq.com/s/UebPA-2XenAdw7lTs2NttA"
},
"desc": "中国飞鹤发布2024年ESG报告",
"bgUrl": "brandpage/esg1.png"
},
{
"desc2": "中国飞鹤于2025年4月初在全国范围内启动 总规模为12亿元，为符合条件的孕期家庭提 供不少于1500元生育补贴的飞鹤生育补贴",
"link": {
"extra": {},
"type": 3,
"url": "https://mp.weixin.qq.com/s/TpjCyjCf2Df3t1RMfi-JKQ"
},
"desc": "12亿元生育补贴计划",
"bgUrl": "brandpage/esg2.png"
},
{
"desc2": "百年大计，教育为本；教育大计，教师为本。 近三年来，飞鹤已投入超过6500万元开展专 项助教活动，惠及在职专任教师超过28万人",
"link": {
"extra": {},
"type": 3,
"url": "https://mp.weixin.qq.com/s/fvo6LV95tCIPA_lda9L7zw"
},
"desc": "教育公益",
"bgUrl": "brandpage/esg3.png"
}
]
],
"channel": {
"finderUserName": "sphgexisAi0pRGm",
"feedId": "export/UzFfAgtgekIEAQAAAAAABbEMmxr36QAAAAstQy6ubaLX4KHWvLEZgBPEgaJkYSYbLr6JzNPgMJp7tTZCYcYsIpU6Z0fgSnSE"
},
"qrInfoList": [
{
"qrUrl": "brandpage/qrhxf_sph.png",
"title": "视频号",
"desc": "扫码关注<span style='color:#D3A358;'>鹤小飞一家</span>视频号，看超多有爱的趣味故事"
},
{
"qrUrl": "brandpage/qrhxf_wxxd.png",
"title": "微信小店",
"desc": "扫码进入<span style='color:#D3A358;'>鹤小飞一家</span>店铺，挑选精美限量周边"
}
],
"productTabList": [
"全部",
"母婴全阶",
"功能营养",
"儿童产品",
"北纬47°",
"星妈优选"
],
"swiperIconList": [
{
"text": "北纬47°生态",
"baseUrl": "brandpage/corn1.png",
"activeUrl": "brandpage/corn2.png"
},
{
"text": "13家自有牧场",
"baseUrl": "brandpage/cattle1.png",
"activeUrl": "brandpage/cattle2.png"
},
{
"text": "北纬47°有机黑土",
"baseUrl": "brandpage/factory1.png",
"activeUrl": "brandpage/factory2.png"
}, {
"text": "工厂游预约",
"baseUrl": "brandpage/factory1.png",
"activeUrl": "brandpage/factory2.png"
}
],
"ipDesc": "鹤小飞一家是由鹤爸、鹤妈、鹤小飞（哥哥）、鹤小小（妹妹） 组成的一家。\n四口热爱生活、积极向上，是他们一家对生活的态度。"
};
if (data) {
this.swiperList = data.swiperList;
this.erqiPeizhi = data.erqiPeizhi;
......@@ -888,6 +965,16 @@ export default {
md.sensorLog(evt);
}
this.channelTabIndex = _index;
// 自动滚动到选中的tab
this.$nextTick(() => {
const scrollView = uni.createSelectorQuery().select('.listbox');
if (scrollView) {
scrollView.scrollOffset((res) => {
// 这里可以添加额外的滚动逻辑
}).exec();
}
});
},
showPopup(_index, evt) {
if (evt) {
......@@ -1145,24 +1232,42 @@ export default {
}
.listbox {
display: flex;
margin-top: 15rpx;
width: 686rpx;
align-content: center;
justify-content: space-between;
.tabitem {
color: @color-black-deep;
background-color: #e9edf1;
padding: 15rpx 20rpx;
font-size: 22rpx;
// margin-right: 15rpx;
border-radius: 30rpx;
}
white-space: nowrap;
.tab-container {
display: flex;
align-items: center;
padding: 0 20rpx;
min-width: 100%;
.tabitem {
color: @color-black-deep;
background-color: #e9edf1;
padding: 15rpx 20rpx;
font-size: 22rpx;
margin-right: 15rpx;
border-radius: 30rpx;
flex-shrink: 0;
white-space: nowrap;
transition: all 0.3s ease;
cursor: pointer;
&:last-child {
margin-right: 0;
}
&:active {
transform: scale(0.95);
}
}
.tabActive {
color: white;
background-color: @color-gold-main;
.tabActive {
color: white;
background-color: @color-gold-main;
box-shadow: 0 2rpx 8rpx rgba(211, 163, 88, 0.3);
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment