|
|
@ -6,13 +6,24 @@ |
|
|
|
|
|
|
|
<view class="main-container" style="margin-top: -2400rpx;position: relative;" > |
|
|
|
|
|
|
|
<view class="type-container no-scrollbar" style="padding: 0 20rpx;"> |
|
|
|
<!-- <view class="type-container no-scrollbar" > |
|
|
|
<view :class="['type-item']" @click="changeTypeIndex(i)" |
|
|
|
v-for="(item,i) in typeList" :key="i"> |
|
|
|
<image v-show="typeIndex==i" mode="aspectFill" :src="item.imgs"></image> |
|
|
|
<image v-show="typeIndex!=i" mode="aspectFill" :src="item.img"></image> |
|
|
|
</view> |
|
|
|
</view> --> |
|
|
|
<scroll-view class="type-container type-scroll" scroll-x="true" scroll-with-animation="true" enable-flex |
|
|
|
:scroll-into-view="scrollIntoView" :show-scrollbar="false"> |
|
|
|
<view :id="`item-${i}`" :class="['type-item']" @click="changeTypeIndex(i)" |
|
|
|
v-for="(item,i) in typeList" :key="i"> |
|
|
|
<image v-show="typeIndex==i" mode="aspectFill" :src="item.imgs"></image> |
|
|
|
<image v-show="typeIndex!=i" mode="aspectFill" :src="item.img"></image> |
|
|
|
</view> |
|
|
|
<view style="width: 20rpx;height: 1rpx;flex-shrink: 0;"></view> |
|
|
|
</scroll-view> |
|
|
|
|
|
|
|
|
|
|
|
<uni-transition :mode-class="['slide-left','fade']" :show="show"> |
|
|
|
<view class="type-container"> |
|
|
|
<image :src="typeList[typeIndex].textImg" mode="widthFix" style="width: 100%;margin: 25rpx 0 30rpx;"></image> |
|
|
@ -78,30 +89,31 @@ |
|
|
|
id: 104,title: "绿色食品",viewNum:6, list: [], |
|
|
|
img:"https://static.ticket.sz-trip.com/uploads/20250916/70b50a9d3f0b70454763e7146ac0a4d1.png", |
|
|
|
imgs:"https://static.ticket.sz-trip.com/uploads/20250916/3b251683c250cf6669378266ed786de4.png", |
|
|
|
textImg: "https://static.ticket.sz-trip.com/uploads/20250916/e03b1f9e7a9880d2c7f67ee6b4a58643.png", |
|
|
|
textImg: "https://static.ticket.sz-trip.com/uploads/20250916/277332c4b9e2e9c52eff288f131bc290.png", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 105,title: "有机农产品",viewNum:6, list: [], |
|
|
|
img:"https://static.ticket.sz-trip.com/uploads/20250916/600b3f0ca1b6582da3dc128f98cc1ea9.png", |
|
|
|
imgs:"https://static.ticket.sz-trip.com/uploads/20250916/9692497b22091c3e3d3d69bf9c4fd311.png", |
|
|
|
textImg:"https://static.ticket.sz-trip.com/uploads/20250916/51606f5e0a94c364a8237777e5398aaa.png", |
|
|
|
textImg:"https://static.ticket.sz-trip.com/uploads/20250916/b9f991050bfaaee598e2d91cd731801f.png", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 106,title: "名特优新",viewNum:6, list: [], |
|
|
|
img:"https://static.ticket.sz-trip.com/uploads/20250916/9810f9261e137b354132063fced2d43c.png", |
|
|
|
imgs:"https://static.ticket.sz-trip.com/uploads/20250916/2b3cfb94571cd911af3cca2b4027438c.png", |
|
|
|
textImg:"https://static.ticket.sz-trip.com/uploads/20250916/d99a160fb1caa3eb56697344fc08df46.png", |
|
|
|
textImg:"https://static.ticket.sz-trip.com/uploads/20250916/40dc980c379e382d2e43dfc6d2cfc5f8.png", |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 107,title: "农产品地理标志",viewNum:6, list: [], |
|
|
|
img:"https://static.ticket.sz-trip.com/uploads/20250916/6c8216888e1224e9534309bde2a87a14.png", |
|
|
|
imgs:"https://static.ticket.sz-trip.com/uploads/20250916/37d84af1f692cce86158ff0784fefb73.png", |
|
|
|
textImg:"https://static.ticket.sz-trip.com/uploads/20250916/898fda5fdc950817faa0bfd318f1fa95.png", |
|
|
|
textImg:"https://static.ticket.sz-trip.com/uploads/20250916/3b7395a773381ebe93c224528100e0c8.png", |
|
|
|
}, |
|
|
|
], |
|
|
|
showGoTop: false, |
|
|
|
|
|
|
|
show: true, |
|
|
|
scrollIntoView: "item-0", |
|
|
|
} |
|
|
|
}, |
|
|
|
onLoad(option) { |
|
|
@ -121,6 +133,17 @@ |
|
|
|
this.typeIndex = i; |
|
|
|
this.show = true; |
|
|
|
},300) |
|
|
|
|
|
|
|
this.$nextTick(()=>{ |
|
|
|
let index=i-1; |
|
|
|
if (index<0) {index=0} |
|
|
|
// 小程序:使用scroll-into-view |
|
|
|
this.scrollIntoView = `item-${index}`; |
|
|
|
// 强制刷新(解决偶发不滚动问题) |
|
|
|
setTimeout(() => { |
|
|
|
this.scrollIntoView = `item-${index}`; |
|
|
|
}, 100); |
|
|
|
}) |
|
|
|
}, |
|
|
|
getHeadImg (id) { |
|
|
|
this.Post({id},'/api/multimedia/detail').then(res => { |
|
|
@ -280,6 +303,12 @@ |
|
|
|
margin-right: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
.type-container.type-scroll{ |
|
|
|
height: 90rpx; |
|
|
|
padding: 0; |
|
|
|
padding-left: 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
} |
|
|
|
|
|
|
|
.column-product{ |
|
|
|
width: 335rpx; |
|
|
|