|
|
|
@ -1,10 +1,10 @@ |
|
|
|
<template> |
|
|
|
<view class="centent"> |
|
|
|
<view class="title" @click="$url('/pages/discover/discover')">精选发现好物</view> |
|
|
|
<scroll-view class="find-scroll" :scroll-x="true"> |
|
|
|
<scroll-view class="find-scroll" :scroll-x="true" @scroll="scroll"> |
|
|
|
<view class="find-content"> |
|
|
|
<!-- :class="{'max-item': index == 0}" --> |
|
|
|
<view class="find-item" |
|
|
|
<view class="find-item" :id="'find_'+ (index+1)" |
|
|
|
:class="{'max-item': index+1 == show_item}" |
|
|
|
@click="$url('/pages/discover/discoverdetails')" |
|
|
|
v-for="(item, index) in list" :key="index"> |
|
|
|
<image class="img" :src="item.image"></image> |
|
|
|
@ -26,14 +26,30 @@ |
|
|
|
}, |
|
|
|
data(){ |
|
|
|
return { |
|
|
|
current: 0 |
|
|
|
current: 0, |
|
|
|
scroll_view: 'find_1', |
|
|
|
show_item: 1 // 当前显示的是第几个卡片 |
|
|
|
} |
|
|
|
}, |
|
|
|
created(){ |
|
|
|
|
|
|
|
}, |
|
|
|
methods: { |
|
|
|
scroll(event){ |
|
|
|
var currentLeft = event.detail.scrollLeft; // 当前已滚动的距离 |
|
|
|
var length = this.list.length; |
|
|
|
var itemWidth = uni.upx2px(380); // 页面元素.find-item rpx转为px |
|
|
|
var itemRight = uni.upx2px(20); // 页面元素.find-item 右边距 |
|
|
|
var itemTotalW = itemWidth + itemRight; |
|
|
|
|
|
|
|
var totalW = length * itemTotalW; // 1000 200 |
|
|
|
var startW = currentLeft > itemTotalW ? currentLeft : itemTotalW; |
|
|
|
var number = Math.ceil(startW / totalW * length); // 得到当前是第几个元素 |
|
|
|
|
|
|
|
// scrollLeft 已被滚动到元素一半宽度 |
|
|
|
if(number * itemTotalW - (itemTotalW/2) <= currentLeft){ |
|
|
|
this.show_item = number + 1; // 得到变大的元素 |
|
|
|
}else{ |
|
|
|
this.show_item = number; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
邓平艺
4 years ago