|
|
@ -18,14 +18,17 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="tab_pos" style=""> |
|
|
|
<view class="tab_fix" :style="{ 'border-radius': radius}"> |
|
|
|
<view class="tab_bg" :style="{ 'border-radius': radius}"> |
|
|
|
<!-- <view class="tab_posxi" v-if="isAtTop"></view> --> |
|
|
|
|
|
|
|
<view class="tab_pos"> |
|
|
|
|
|
|
|
<view class="tab_bg"> |
|
|
|
<view :class="[tabIndex==index ? 'tab_active' : 'tab_a']" v-for="(item,index) in tabbar" |
|
|
|
<view :class="[tabIndex==index ? 'tab_active' : 'tab_a']" v-for="(item,index) in tabbar" |
|
|
|
@click="onChage(index)" :key="index"> |
|
|
|
@click="onChage(index)" :key="index"> |
|
|
|
{{item}} |
|
|
|
{{item}} |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
<view class="tab-type"> |
|
|
|
<view class="tab-type"> |
|
|
|
<view class="tab-pro" v-for="(item,index) in tabType" :class="index==banIndex?'tab-pro-active':''" |
|
|
|
<view class="tab-pro" v-for="(item,index) in tabType" :class="index==banIndex?'tab-pro-active':''" |
|
|
|
@click="onChageBan(index)" :key="index"> |
|
|
|
@click="onChageBan(index)" :key="index"> |
|
|
@ -255,6 +258,7 @@ |
|
|
|
retail: '', |
|
|
|
retail: '', |
|
|
|
wholesale: '', |
|
|
|
wholesale: '', |
|
|
|
scrollTop: 0, |
|
|
|
scrollTop: 0, |
|
|
|
|
|
|
|
isAtTop: '' |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
onLoad() { |
|
|
|
onLoad() { |
|
|
@ -270,10 +274,19 @@ |
|
|
|
onShow() { |
|
|
|
onShow() { |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
}, |
|
|
|
// onPageScroll(e) { |
|
|
|
onPageScroll(e) { |
|
|
|
// this.scrollTop=e.scrollTop |
|
|
|
this.checkIfElementIsAtTop() |
|
|
|
// }, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
methods: { |
|
|
|
|
|
|
|
checkIfElementIsAtTop() { |
|
|
|
|
|
|
|
const query = uni.createSelectorQuery().in(this); |
|
|
|
|
|
|
|
query.select('.tab_fix').boundingClientRect(data => { |
|
|
|
|
|
|
|
if (data) { |
|
|
|
|
|
|
|
// 元素的top值如果是0,说明它到达了顶部 |
|
|
|
|
|
|
|
this.isAtTop = data.top === 0; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}).exec(); |
|
|
|
|
|
|
|
}, |
|
|
|
goRules() { |
|
|
|
goRules() { |
|
|
|
uni.navigateTo({ |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/pages/gamll/rules' |
|
|
|
url: '/pages/gamll/rules' |
|
|
@ -339,6 +352,7 @@ |
|
|
|
this.leftNum = index == 0 ? 33.33333 : 66.66666; |
|
|
|
this.leftNum = index == 0 ? 33.33333 : 66.66666; |
|
|
|
this.tabIndex = index; |
|
|
|
this.tabIndex = index; |
|
|
|
this.getRetailList() |
|
|
|
this.getRetailList() |
|
|
|
|
|
|
|
this.getDescribe() |
|
|
|
}, |
|
|
|
}, |
|
|
|
onChageBan(index) { |
|
|
|
onChageBan(index) { |
|
|
|
this.banIndex = index |
|
|
|
this.banIndex = index |
|
|
@ -689,10 +703,8 @@ |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tab_pos { |
|
|
|
.tab_fix { |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
height: 126rpx; |
|
|
|
|
|
|
|
position: -webkit-sticky; |
|
|
|
position: -webkit-sticky; |
|
|
|
/* 针对Safari浏览器的兼容性 */ |
|
|
|
/* 针对Safari浏览器的兼容性 */ |
|
|
|
position: sticky; |
|
|
|
position: sticky; |
|
|
@ -700,6 +712,20 @@ |
|
|
|
/* 设置吸顶的位置 */ |
|
|
|
/* 设置吸顶的位置 */ |
|
|
|
z-index: 99999; |
|
|
|
z-index: 99999; |
|
|
|
/* 确保sticky元素在其他内容之上 */ |
|
|
|
/* 确保sticky元素在其他内容之上 */ |
|
|
|
|
|
|
|
background: linear-gradient(180deg, rgba(253, 202, 197, 1) 0.42%, rgba(254, 231, 229, 1) 32.99%, rgba(255, 255, 255, 1) 100%); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.tab_pos { |
|
|
|
|
|
|
|
position: relative; |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
height: 126rpx; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.tab_posxi { |
|
|
|
|
|
|
|
// background: #fdcac5; |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
|
|
|
height: 120rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tab_bg { |
|
|
|
.tab_bg { |
|
|
@ -710,7 +736,7 @@ |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
justify-content: center; |
|
|
|
// border-radius: 28rpx 28rpx, 0rpx, 0rpx; |
|
|
|
// border-radius: 28rpx 28rpx, 0rpx, 0rpx; |
|
|
|
background: linear-gradient(180deg, rgba(253, 202, 197, 1) 0.42%, rgba(254, 231, 229, 1) 32.99%, rgba(255, 255, 255, 1) 100%); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tab_a { |
|
|
|
.tab_a { |
|
|
|