Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完成发现组件元素激活变大样式，完成热销榜单徽章样式优化

master
邓平艺 4 years ago
parent
b01b031653
commit
16b7a6e1f3
3 changed files with 73 additions and 44 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      components/lf-indexFind/lf-indexFind.vue
  2. 38
      pages/index/list/monthlyList.vue
  3. 39
      pages/index/list/selected.vue

30
components/lf-indexFind/lf-indexFind.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<view class="centent"> <view class="centent">
<view class="title" @click="$url('/pages/discover/discover')">精选发现好物</view> <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"> <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')" @click="$url('/pages/discover/discoverdetails')"
v-for="(item, index) in list" :key="index"> v-for="(item, index) in list" :key="index">
<image class="img" :src="item.image"></image> <image class="img" :src="item.image"></image>
@ -26,14 +26,30 @@
}, },
data(){ data(){
return { return {
current: 0
current: 0,
scroll_view: 'find_1',
show_item: 1 // 当前显示的是第几个卡片
} }
},
created(){
}, },
methods: { 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> </script>

38
pages/index/list/monthlyList.vue
View File

@ -9,7 +9,10 @@
<view class="card" v-for="(item, index) in 7" :key="index" @click="$url('/pages/shop/goodsdetail?type=mail')"> <view class="card" v-for="(item, index) in 7" :key="index" @click="$url('/pages/shop/goodsdetail?type=mail')">
<view class="goods-img"> <view class="goods-img">
<image class="img" src="https://picsum.photos/200/300"></image> <image class="img" src="https://picsum.photos/200/300"></image>
<view class="ranking">{{ item+1 }}</view>
<view class="ranking">
<view class="top">{{ item+1 }}</view>
<view class="down"></view>
</view>
</view> </view>
<view class="goods-info"> <view class="goods-info">
<view> <view>
@ -103,23 +106,26 @@
top: 0; top: 0;
left: 0; left: 0;
width: 36rpx; width: 36rpx;
height: 38rpx;
height: 56rpx;
overflow: hidden;
.top{
width: 36rpx;
height: 36rpx;
background-color: #15716E; background-color: #15716E;
color: #FFFFFF;
line-height: 38rpx;
position: relative;
z-index: 3;
text-align: center; text-align: center;
z-index: 9;
&::after{
content: '';
position: absolute;
bottom: -16rpx;
left: 2rpx;
width: 0rpx;
height: 0rpx;
border-left: 17rpx solid transparent;
border-right: 17rpx solid transparent;
border-top: 17rpx solid #15716E;
z-index: -1;
color: #FFFFFF;
font-size: 28rpx;
}
.down{
width: 36rpx;
height: 36rpx;
background-color: #15716E;
transform: rotate(45deg);
margin-top: -26rpx;
position: relative;
z-index: 1;
} }
} }
} }

39
pages/index/list/selected.vue
View File

@ -16,7 +16,10 @@
<view class="goods-item" v-for="(item, index) in 5" :key="index" @click="$url('/pages/shop/goodsdetail?type=mail')"> <view class="goods-item" v-for="(item, index) in 5" :key="index" @click="$url('/pages/shop/goodsdetail?type=mail')">
<view class="goods-img"> <view class="goods-img">
<image class="img"></image> <image class="img"></image>
<view class="ranking">{{ item+1 }}</view>
<view class="ranking">
<view class="top">{{ item+1 }}</view>
<view class="down"></view>
</view>
</view> </view>
<view class="goods-info"> <view class="goods-info">
<view class="lf-line-1">猪大肠卖咯 5毛钱一斤咯</view> <view class="lf-line-1">猪大肠卖咯 5毛钱一斤咯</view>
@ -119,28 +122,32 @@
background-color: #EEEEEE; background-color: #EEEEEE;
border-radius: 10rpx; border-radius: 10rpx;
} }
.ranking{ .ranking{
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 36rpx; width: 36rpx;
height: 38rpx;
height: 56rpx;
overflow: hidden;
.top{
width: 36rpx;
height: 36rpx;
background-color: #15716E; background-color: #15716E;
color: #FFFFFF;
line-height: 38rpx;
position: relative;
z-index: 3;
text-align: center; text-align: center;
z-index: 9;
&::after{
content: '';
position: absolute;
bottom: -16rpx;
left: 2rpx;
width: 0rpx;
height: 0rpx;
border-left: 17rpx solid transparent;
border-right: 17rpx solid transparent;
border-top: 17rpx solid #15716E;
z-index: -1;
color: #FFFFFF;
font-size: 28rpx;
}
.down{
width: 36rpx;
height: 36rpx;
background-color: #15716E;
transform: rotate(45deg);
margin-top: -26rpx;
position: relative;
z-index: 1;
} }
} }
} }

Write Preview
Loading…
Cancel
Save