mkm/nk-shop2.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改滑动顶部样式

Browse Source
This commit is contained in:
jia 2023-09-05 09:09:27 +08:00
parent 173d2fa17d
commit 6ef701651b
3 changed files with 71 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
pages/gather/gather.vue
View File

@ -1,29 +1,25 @@
<template> <template>
<view class="gather"> <view class="gather">
<view @click="selectLocation" v-if="isFshow"> <view @click="selectLocation" v-if="isFshow">
<view
class="site-box flex_a_c_j_sb" <view class="site-box flex_a_c_j_sb" :style="{'background-color':backColor}">
:style="{ 'background-color': backColor }"
> <view :class="['place_wrapper','flex_a_c',isFshow?'sitebox':'']" @click="selectLocation">
<view :class="['place_wrapper', 'flex_a_c', isFshow ? 'sitebox' : '']"> <view :class="['iconfont','icon-weizhi',isFshow?'sitebox':'']" style="color:#000;margin-left: 20rpx;">
<view </view>
:class="['iconfont', 'icon-weizhi', isFshow ? 'sitebox' : '']" <view class="town_name" style="color:#000;">{{street}}</view>
style="margin-left: 20rpx" </view>
> <navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
</view> <view :class="['iconfont','icon-xiaoxi',isFshow?'sitebox':'']" style="color:#000;"></view>
<view class="town_name">{{ street }}</view> </navigator>
</view> </view>
<navigator <!-- <view class="site-box ','flex_a_c_j_sb'" v-if="ishshow">
url="/pages/chat/customer_list/index?type=0" <view class="bg-img">
hover-class="none" <img :src="bgColor" alt="">
> </view>
<view </view> -->
:class="['iconfont', 'icon-xiaoxi', isFshow ? 'sitebox' : '']"
style="color: #fff"
></view>
</navigator>
</view> </view>
</view>
<zbpSwiper <zbpSwiper
:isSelectPlace="true" :isSelectPlace="true"
@ -189,7 +185,7 @@ export default {
columnData: [], columnData: [],
bgColor: '', bgColor: '',
isFshow: false, isFshow: false,
backColor: 'rgba(248, 66, 33, 0)' backColor: 'rgba(252, 252, 252, 0)'
}; };
}, },
computed: { computed: {
@ -240,13 +236,13 @@ export default {
onPageScroll (e) { onPageScroll (e) {
const scrollTop = e.scrollTop; const scrollTop = e.scrollTop;
if (scrollTop <= 20) { if (scrollTop <= 20) {
this.backColor = 'rgba(248, 66, 33, 0)' this.backColor = 'rgba(252, 252, 252, 0)'
this.isFshow = false this.isFshow = false
} else if (20 < scrollTop && scrollTop <= 100) { } else if (20 < scrollTop && scrollTop <= 100) {
this.backColor = 'rgba(248, 66, 33, .5)' this.backColor = 'rgba(252, 252, 252, .5)'
this.isFshow = true this.isFshow = true
} else if (scrollTop > 100) { } else if (scrollTop > 100) {
this.backColor = 'rgba(248, 66, 33, 1)' this.backColor = 'rgba(252, 252, 252, 1)'
this.isFshow = true this.isFshow = true
@ -283,13 +279,13 @@ export default {
if (scrollTop <= 20) { if (scrollTop <= 20) {
this.backColor = 'rgba(248, 66, 33, 0)' this.backColor = 'rgba(252, 252, 252, 0)'
this.isFshow = false this.isFshow = false
} else if (20 < scrollTop && scrollTop <= 100) { } else if (20 < scrollTop && scrollTop <= 100) {
this.backColor = 'rgba(248, 66, 33, .5)' this.backColor = 'rgba(252, 252, 252, .5)'
this.isFshow = true this.isFshow = true
} else if (scrollTop > 100) { } else if (scrollTop > 100) {
this.backColor = 'rgba(248, 66, 33, 1)' this.backColor = 'rgba(252, 252, 252, 1)'
this.isFshow = true this.isFshow = true

51
pages/index/index.vue
View File

@ -5,12 +5,12 @@
<view class="site-box flex_a_c_j_sb" :style="{'background-color':backColor}"> <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="['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>
<view class="town_name">{{street}}</view> <view class="town_name" style="color:#000;">{{street}}</view>
</view> </view>
<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none"> <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> </navigator>
</view> </view>
<!-- <view class="site-box ','flex_a_c_j_sb'" v-if="ishshow"> <!-- <view class="site-box ','flex_a_c_j_sb'" v-if="ishshow">
@ -215,7 +215,7 @@
streeta_id: '', streeta_id: '',
street: '', street: '',
bgColor: '', bgColor: '',
backColor: 'rgba(248, 66, 33, 0)', backColor: 'rgba(252, 252, 252, 0)',
isFshow: false, isFshow: false,
scrollTop: 0, scrollTop: 0,
show: true show: true
@ -257,7 +257,7 @@
onReachBottom() { onReachBottom() {
if (this.status == 'nomore') return; if (this.status == 'nomore') return;
this.status = 'loading'; this.status = 'loading';
this.where.page = ++this.where.page; this.where.page = ++this.where.page;
this.getGoods() this.getGoods()
}, },
@ -282,15 +282,15 @@
// 导航条颜色透明渐变 // 导航条颜色透明渐变
if (scrollTop <= 20) { if (scrollTop <= 20) {
this.backColor = 'rgba(248, 66, 33, 0)' this.backColor = 'rgba(252, 252, 252, 0.0)'
this.isFshow = false this.isFshow = false
this.show = true this.show = true
} else if (20 < scrollTop && scrollTop <= 100) { } 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.isFshow = true
this.show = false this.show = false
} else if (scrollTop > 100) { } else if (scrollTop > 100) {
this.backColor = 'rgba(248, 66, 33, 1)' this.backColor = 'rgba(252, 252, 252, 1.0)'
this.isFshow = true this.isFshow = true
this.show = false this.show = false
} }
@ -312,7 +312,6 @@
// console.log("header 滚动距离 ", scrollTop); // console.log("header 滚动距离 ", scrollTop);
// 更新——滚动前，滚动条距文档顶部的距离 // 更新——滚动前，滚动条距文档顶部的距离
this.oldScrollTop = scrollTop; this.oldScrollTop = scrollTop;
//变量windowHeight是可视区的高度 //变量windowHeight是可视区的高度
let windowHeight = let windowHeight =
document.documentElement.clientHeight || document.body.clientHeight; document.documentElement.clientHeight || document.body.clientHeight;
@ -325,15 +324,14 @@
//你想做的事情 //你想做的事情
// console.log("header 你已经到底部了"); // console.log("header 你已经到底部了");
} }
if (scrollTop <= 20) { if (scrollTop <= 20) {
this.backColor = 'rgba(248, 66, 33, 0)' this.backColor = 'rgba(252, 252, 252, 0.0)'
this.isFshow = false this.isFshow = false
} else if (20 < scrollTop && scrollTop <= 100) { } 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.isFshow = true
} else if (scrollTop > 100) { } else if (scrollTop > 100) {
this.backColor = 'rgba(248, 66, 33, 1)' this.backColor = 'rgba(252, 252, 252, 1.0)'
this.isFshow = true this.isFshow = true
@ -402,7 +400,7 @@
this.street = e.value[1].name this.street = e.value[1].name
this.$nextTick(() => { this.$nextTick(() => {
this.$bus.$emit('value-updated',e.value[1].name + ',' +e.value[1].code); 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 (this.where.page == 1 && res.data.list.length <= 0) this.emptyShow = true
if (item) { // if (item) {
if (item.index == 1 && this.cateGoods[0]) { // if (item.index == 1 && this.cateGoods[0]) {
uni.navigateTo({ // uni.navigateTo({
// #ifdef MP || H5 // // #ifdef MP || H5
url: `/pages/short_video/nvueSwiper/index?id=${this.cateGoods[0].community_id}` // url: `/pages/short_video/nvueSwiper/index?id=${this.cateGoods[0].community_id}`
// #endif // // #endif
// #ifdef APP // // #ifdef APP
url: `/pages/short_video/appSwiper/index?id=${this.cateGoods[0].community_id}` // url: `/pages/short_video/appSwiper/index?id=${this.cateGoods[0].community_id}`
// #endif // // #endif
}) // })
} // }
} // }
}) })
}, },
@ -532,7 +530,6 @@
type: 'wgs84', type: 'wgs84',
timeout: '10', timeout: '10',
success: (res) => { success: (res) => {
this.isshow = false this.isshow = false
let latitude, longitude; let latitude, longitude;
latitude = res.latitude.toString(); latitude = res.latitude.toString();

59
pages/supply_chains/supply_chains.vue
View File

@ -1,37 +1,22 @@
<template> <template>
<view class="Circle_friends"> <view class="Circle_friends">
<view class="circle_friends_wrapper"> <view class="circle_friends_wrapper">
<view @click="selectLocation" v-if="isFshow"> <view v-if="isFshow">
<view <view class="site-box flex_a_c_j_sb" :style="{'background-color':backColor}">
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="['place_wrapper', 'flex_a_c', isFshow ? 'sitebox' : '']" <view class="town_name" style="color:#000;">{{street}}</view>
> </view>
<view <navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
:class="['iconfont', 'icon-weizhi', isFshow ? 'sitebox' : '']" <view :class="['iconfont','icon-xiaoxi',isFshow?'sitebox':'']" style="color:#000;"></view>
style="margin-left: 20rpx" </navigator>
> </view>
</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> </view>
<zbpSwiper <zbpSwiper
:isSelectPlace="true" :isSelectPlace="true"
@ -255,7 +240,7 @@ export default {
street: '', street: '',
bgColor: '', bgColor: '',
isFshow: false, isFshow: false,
backColor: 'rgba(248, 66, 33, 0)' backColor: 'rgba(252, 252, 252, 0)'
} }
}, },
@ -320,13 +305,13 @@ export default {
const scrollTop = e.scrollTop; const scrollTop = e.scrollTop;
if (scrollTop <= 20) { if (scrollTop <= 20) {
this.backColor = 'rgba(248, 66, 33, 0)' this.backColor = 'rgba(252, 252, 252, 0)'
this.isFshow = false this.isFshow = false
} else if (20 < scrollTop && scrollTop <= 100) { } else if (20 < scrollTop && scrollTop <= 100) {
this.backColor = 'rgba(248, 66, 33, .5)' this.backColor = 'rgba(252, 252, 252, .5)'
this.isFshow = true this.isFshow = true
} else if (scrollTop > 100) { } else if (scrollTop > 100) {
this.backColor = 'rgba(248, 66, 33, 1)' this.backColor = 'rgba(252, 252, 252, 1)'
this.isFshow = true this.isFshow = true
@ -382,13 +367,13 @@ export default {
if (scrollTop <= 20) { if (scrollTop <= 20) {
this.backColor = 'rgba(248, 66, 33, 0)' this.backColor = 'rgba(252, 252, 252, 0)'
this.isFshow = false this.isFshow = false
} else if (20 < scrollTop && scrollTop <= 100) { } else if (20 < scrollTop && scrollTop <= 100) {
this.backColor = 'rgba(248, 66, 33, .5)' this.backColor = 'rgba(252, 252, 252, .5)'
this.isFshow = true this.isFshow = true
} else if (scrollTop > 100) { } else if (scrollTop > 100) {
this.backColor = 'rgba(248, 66, 33, 1)' this.backColor = 'rgba(252, 252, 252, 1)'
this.isFshow = true this.isFshow = true