修改滑动顶部样式
This commit is contained in:
jia
parent
173d2fa17d
commit
6ef701651b
@ -1,29 +1,25 @@
|
||||
<template>
|
||||
<view class="gather">
|
||||
<view @click="selectLocation" v-if="isFshow">
|
||||
<view
|
||||
class="site-box flex_a_c_j_sb"
|
||||
:style="{ 'background-color': backColor }"
|
||||
>
|
||||
<view :class="['place_wrapper', 'flex_a_c', isFshow ? 'sitebox' : '']">
|
||||
<view
|
||||
:class="['iconfont', 'icon-weizhi', isFshow ? 'sitebox' : '']"
|
||||
style="margin-left: 20rpx"
|
||||
>
|
||||
</view>
|
||||
<view class="town_name">{{ street }}</view>
|
||||
</view>
|
||||
<navigator
|
||||
url="/pages/chat/customer_list/index?type=0"
|
||||
hover-class="none"
|
||||
>
|
||||
<view
|
||||
:class="['iconfont', 'icon-xiaoxi', isFshow ? 'sitebox' : '']"
|
||||
style="color: #fff"
|
||||
></view>
|
||||
</navigator>
|
||||
|
||||
<view class="site-box flex_a_c_j_sb" :style="{'background-color':backColor}">
|
||||
|
||||
<view :class="['place_wrapper','flex_a_c',isFshow?'sitebox':'']" @click="selectLocation">
|
||||
<view :class="['iconfont','icon-weizhi',isFshow?'sitebox':'']" style="color:#000;margin-left: 20rpx;">
|
||||
</view>
|
||||
<view class="town_name" style="color:#000;">{{street}}</view>
|
||||
</view>
|
||||
<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
|
||||
<view :class="['iconfont','icon-xiaoxi',isFshow?'sitebox':'']" style="color:#000;"></view>
|
||||
</navigator>
|
||||
</view>
|
||||
<!-- <view class="site-box ','flex_a_c_j_sb'" v-if="ishshow">
|
||||
<view class="bg-img">
|
||||
<img :src="bgColor" alt="">
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<zbpSwiper
|
||||
:isSelectPlace="true"
|
||||
@ -189,7 +185,7 @@ export default {
|
||||
columnData: [],
|
||||
bgColor: '',
|
||||
isFshow: false,
|
||||
backColor: 'rgba(248, 66, 33, 0)'
|
||||
backColor: 'rgba(252, 252, 252, 0)'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -240,13 +236,13 @@ export default {
|
||||
onPageScroll (e) {
|
||||
const scrollTop = e.scrollTop;
|
||||
if (scrollTop <= 20) {
|
||||
this.backColor = 'rgba(248, 66, 33, 0)'
|
||||
this.backColor = 'rgba(252, 252, 252, 0)'
|
||||
this.isFshow = false
|
||||
} else if (20 < scrollTop && scrollTop <= 100) {
|
||||
this.backColor = 'rgba(248, 66, 33, .5)'
|
||||
this.backColor = 'rgba(252, 252, 252, .5)'
|
||||
this.isFshow = true
|
||||
} else if (scrollTop > 100) {
|
||||
this.backColor = 'rgba(248, 66, 33, 1)'
|
||||
this.backColor = 'rgba(252, 252, 252, 1)'
|
||||
this.isFshow = true
|
||||
|
||||
|
||||
@ -283,13 +279,13 @@ export default {
|
||||
|
||||
|
||||
if (scrollTop <= 20) {
|
||||
this.backColor = 'rgba(248, 66, 33, 0)'
|
||||
this.backColor = 'rgba(252, 252, 252, 0)'
|
||||
this.isFshow = false
|
||||
} else if (20 < scrollTop && scrollTop <= 100) {
|
||||
this.backColor = 'rgba(248, 66, 33, .5)'
|
||||
this.backColor = 'rgba(252, 252, 252, .5)'
|
||||
this.isFshow = true
|
||||
} else if (scrollTop > 100) {
|
||||
this.backColor = 'rgba(248, 66, 33, 1)'
|
||||
this.backColor = 'rgba(252, 252, 252, 1)'
|
||||
this.isFshow = true
|
||||
|
||||
|
||||
|
||||
@ -5,12 +5,12 @@
|
||||
<view class="site-box flex_a_c_j_sb" :style="{'background-color':backColor}">
|
||||
|
||||
<view :class="['place_wrapper','flex_a_c',isFshow?'sitebox':'']" @click="selectLocation">
|
||||
<view :class="['iconfont','icon-weizhi',isFshow?'sitebox':'']" style="margin-left: 20rpx;">
|
||||
<view :class="['iconfont','icon-weizhi',isFshow?'sitebox':'']" style="color:#000;margin-left: 20rpx;">
|
||||
</view>
|
||||
<view class="town_name">{{street}}</view>
|
||||
<view class="town_name" style="color:#000;">{{street}}</view>
|
||||
</view>
|
||||
<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
|
||||
<view :class="['iconfont','icon-xiaoxi',isFshow?'sitebox':'']" style="color:#fff;"></view>
|
||||
<view :class="['iconfont','icon-xiaoxi',isFshow?'sitebox':'']" style="color:#000;"></view>
|
||||
</navigator>
|
||||
</view>
|
||||
<!-- <view class="site-box ','flex_a_c_j_sb'" v-if="ishshow">
|
||||
@ -215,7 +215,7 @@
|
||||
streeta_id: '',
|
||||
street: '',
|
||||
bgColor: '',
|
||||
backColor: 'rgba(248, 66, 33, 0)',
|
||||
backColor: 'rgba(252, 252, 252, 0)',
|
||||
isFshow: false,
|
||||
scrollTop: 0,
|
||||
show: true
|
||||
@ -282,15 +282,15 @@
|
||||
// 导航条颜色透明渐变
|
||||
|
||||
if (scrollTop <= 20) {
|
||||
this.backColor = 'rgba(248, 66, 33, 0)'
|
||||
this.backColor = 'rgba(252, 252, 252, 0.0)'
|
||||
this.isFshow = false
|
||||
this.show = true
|
||||
} else if (20 < scrollTop && scrollTop <= 100) {
|
||||
this.backColor = 'rgba(248, 66, 33, .5)'
|
||||
this.backColor = 'rgba(255, 255, 255, 0.5)'
|
||||
this.isFshow = true
|
||||
this.show = false
|
||||
} else if (scrollTop > 100) {
|
||||
this.backColor = 'rgba(248, 66, 33, 1)'
|
||||
this.backColor = 'rgba(252, 252, 252, 1.0)'
|
||||
this.isFshow = true
|
||||
this.show = false
|
||||
}
|
||||
@ -312,7 +312,6 @@
|
||||
// console.log("header 滚动距离 ", scrollTop);
|
||||
// 更新——滚动前，滚动条距文档顶部的距离
|
||||
this.oldScrollTop = scrollTop;
|
||||
|
||||
//变量windowHeight是可视区的高度
|
||||
let windowHeight =
|
||||
document.documentElement.clientHeight || document.body.clientHeight;
|
||||
@ -325,15 +324,14 @@
|
||||
//你想做的事情
|
||||
// console.log("header 你已经到底部了");
|
||||
}
|
||||
|
||||
if (scrollTop <= 20) {
|
||||
this.backColor = 'rgba(248, 66, 33, 0)'
|
||||
this.backColor = 'rgba(252, 252, 252, 0.0)'
|
||||
this.isFshow = false
|
||||
} else if (20 < scrollTop && scrollTop <= 100) {
|
||||
this.backColor = 'rgba(248, 66, 33, .5)'
|
||||
this.backColor = 'rgba(255, 255, 255, 0.5)'
|
||||
this.isFshow = true
|
||||
} else if (scrollTop > 100) {
|
||||
this.backColor = 'rgba(248, 66, 33, 1)'
|
||||
this.backColor = 'rgba(252, 252, 252, 1.0)'
|
||||
this.isFshow = true
|
||||
|
||||
|
||||
@ -402,7 +400,7 @@
|
||||
|
||||
this.street = e.value[1].name
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$nextTick(() => {
|
||||
this.$bus.$emit('value-updated',e.value[1].name + ',' +e.value[1].code);
|
||||
|
||||
})
|
||||
@ -485,19 +483,19 @@
|
||||
|
||||
if (this.where.page == 1 && res.data.list.length <= 0) this.emptyShow = true
|
||||
|
||||
if (item) {
|
||||
// if (item) {
|
||||
|
||||
if (item.index == 1 && this.cateGoods[0]) {
|
||||
uni.navigateTo({
|
||||
// #ifdef MP || H5
|
||||
url: `/pages/short_video/nvueSwiper/index?id=${this.cateGoods[0].community_id}`
|
||||
// #endif
|
||||
// #ifdef APP
|
||||
url: `/pages/short_video/appSwiper/index?id=${this.cateGoods[0].community_id}`
|
||||
// #endif
|
||||
})
|
||||
}
|
||||
}
|
||||
// if (item.index == 1 && this.cateGoods[0]) {
|
||||
// uni.navigateTo({
|
||||
// // #ifdef MP || H5
|
||||
// url: `/pages/short_video/nvueSwiper/index?id=${this.cateGoods[0].community_id}`
|
||||
// // #endif
|
||||
// // #ifdef APP
|
||||
// url: `/pages/short_video/appSwiper/index?id=${this.cateGoods[0].community_id}`
|
||||
// // #endif
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
|
||||
})
|
||||
},
|
||||
@ -532,7 +530,6 @@
|
||||
type: 'wgs84',
|
||||
timeout: '10',
|
||||
success: (res) => {
|
||||
|
||||
this.isshow = false
|
||||
let latitude, longitude;
|
||||
latitude = res.latitude.toString();
|
||||
|
||||
@ -1,38 +1,23 @@
|
||||
<template>
|
||||
<view class="Circle_friends">
|
||||
<view class="circle_friends_wrapper">
|
||||
<view @click="selectLocation" v-if="isFshow">
|
||||
<view
|
||||
class="site-box flex_a_c_j_sb"
|
||||
:style="{ 'background-color': backColor }"
|
||||
>
|
||||
<view
|
||||
:class="['place_wrapper', 'flex_a_c', isFshow ? 'sitebox' : '']"
|
||||
>
|
||||
<view
|
||||
:class="['iconfont', 'icon-weizhi', isFshow ? 'sitebox' : '']"
|
||||
style="margin-left: 20rpx"
|
||||
>
|
||||
</view>
|
||||
<view class="town_name">{{ street }}</view>
|
||||
</view>
|
||||
<navigator
|
||||
url="/pages/chat/customer_list/index?type=0"
|
||||
hover-class="none"
|
||||
>
|
||||
<view
|
||||
:class="['iconfont', 'icon-xiaoxi', isFshow ? 'sitebox' : '']"
|
||||
style="color: #fff"
|
||||
></view>
|
||||
</navigator>
|
||||
</view>
|
||||
<!-- <view class="site-box ','flex_a_c_j_sb'" v-if="ishshow">
|
||||
<view class="bg-img">
|
||||
<img :src="bgColor" alt="">
|
||||
</view>
|
||||
</view> -->
|
||||
<view v-if="isFshow">
|
||||
<view class="site-box flex_a_c_j_sb" :style="{'background-color':backColor}">
|
||||
|
||||
<view :class="['place_wrapper','flex_a_c',isFshow?'sitebox':'']" @click="selectLocation">
|
||||
<view :class="['iconfont','icon-weizhi',isFshow?'sitebox':'']" style="color:#000;margin-left: 20rpx;">
|
||||
</view>
|
||||
<view class="town_name" style="color:#000;">{{street}}</view>
|
||||
</view>
|
||||
<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
|
||||
<view :class="['iconfont','icon-xiaoxi',isFshow?'sitebox':'']" style="color:#000;"></view>
|
||||
</navigator>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<zbpSwiper
|
||||
:isSelectPlace="true"
|
||||
:town="street"
|
||||
@ -255,7 +240,7 @@ export default {
|
||||
street: '',
|
||||
bgColor: '',
|
||||
isFshow: false,
|
||||
backColor: 'rgba(248, 66, 33, 0)'
|
||||
backColor: 'rgba(252, 252, 252, 0)'
|
||||
}
|
||||
},
|
||||
|
||||
@ -320,13 +305,13 @@ export default {
|
||||
|
||||
const scrollTop = e.scrollTop;
|
||||
if (scrollTop <= 20) {
|
||||
this.backColor = 'rgba(248, 66, 33, 0)'
|
||||
this.backColor = 'rgba(252, 252, 252, 0)'
|
||||
this.isFshow = false
|
||||
} else if (20 < scrollTop && scrollTop <= 100) {
|
||||
this.backColor = 'rgba(248, 66, 33, .5)'
|
||||
this.backColor = 'rgba(252, 252, 252, .5)'
|
||||
this.isFshow = true
|
||||
} else if (scrollTop > 100) {
|
||||
this.backColor = 'rgba(248, 66, 33, 1)'
|
||||
this.backColor = 'rgba(252, 252, 252, 1)'
|
||||
this.isFshow = true
|
||||
|
||||
|
||||
@ -382,13 +367,13 @@ export default {
|
||||
|
||||
|
||||
if (scrollTop <= 20) {
|
||||
this.backColor = 'rgba(248, 66, 33, 0)'
|
||||
this.backColor = 'rgba(252, 252, 252, 0)'
|
||||
this.isFshow = false
|
||||
} else if (20 < scrollTop && scrollTop <= 100) {
|
||||
this.backColor = 'rgba(248, 66, 33, .5)'
|
||||
this.backColor = 'rgba(252, 252, 252, .5)'
|
||||
this.isFshow = true
|
||||
} else if (scrollTop > 100) {
|
||||
this.backColor = 'rgba(248, 66, 33, 1)'
|
||||
this.backColor = 'rgba(252, 252, 252, 1)'
|
||||
this.isFshow = true
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user