页面上滑一定高度u-navbar底色变白,以及样式问题

main
Connor 2024-06-08 23:44:59 +08:00
parent ecddf78b71
commit f76e47e845
4 changed files with 31 additions and 21 deletions

View File

@ -246,7 +246,7 @@
line-height: 30rpx;
}
.no-focus-text {
font-weight: 400;
font-weight: 600;
width: 58rpx;
// height: 30rpx;
font-size: 28rpx;
@ -254,7 +254,7 @@
color: #3477FC;
}
.focus-text {
font-weight: 400;
font-weight: 600;
/* width: 58rpx; */
// height: 30rpx;
font-size: 28rpx;
@ -337,7 +337,7 @@
}
.center-content-post-tab-text{
font-weight: 400;
font-weight: 600;
/* width: 139rpx; */
// height: 26rpx;
font-size: 24rpx;

View File

@ -1,7 +1,7 @@
<template>
<view class="content">
<!-- 顶部导航栏 -->
<u-navbar leftText=" " title=" " :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor">
<u-navbar leftText=" " title=" " :placeholder="true" :safeAreaInsetTop="true" :bgColor="bgColor" >
<template class="img1BOX" #left>
<image @click="GotoUNISignid()" src="../static/images/icon/tu2-4.png" class="img1"></image>
<!-- <image src="../static/images/icon/tu2-5.png" class="img2 image-container" @click="togglePostType"></image> -->
@ -127,11 +127,21 @@
</template>
<script setup>
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import {onReachBottom,onLoad} from "@dcloudio/uni-app";
import { ref, reactive, onMounted, onUnmounted, onBeforeUnmount, getCurrentInstance } from 'vue';
import {onReachBottom,onLoad,onPageScroll} from "@dcloudio/uni-app";
import PostView from "@/pages/common/postview/index.vue";
const bgColor = ref('rgba(170, 0, 0, 0)');
onPageScroll((e) => {
// console.log("" + e.scrollTop);
if (e.scrollTop >= 70) {
bgColor.value = 'rgba(255, 255, 255, 1)'
} else {
bgColor.value = 'rgba(170, 0, 0, 0)'
}
})
const { proxy } = getCurrentInstance();
onReachBottom(() => {
console.log('触底了')
@ -142,7 +152,6 @@ import PostView from "@/pages/common/postview/index.vue";
const lefther = ref(0);
const searchPrerequisite = ref('热门');
const postTypeOpen = ref(false);
const bgColor = ref('rgba(170, 0, 0, 0)');
// const postTypeList = ['', ''];
const postTypeList = [{lable:'发布话题',id:1}, {lable:'发布活动',id:2}];
@ -186,10 +195,10 @@ import PostView from "@/pages/common/postview/index.vue";
content: '八年前,学弟在工地上杀了一个工友,杀人前,他给警察打了电话,预告杀人的时间和地点,并超出部分测试超出部分测试超出部分测试超出部分测试......超出部分测试超出部分测试超出部分测试超出部分测试',
type: '1',
media: [
'https://tu.sioe.cn/gj/qiege/image.jpg',
'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
'https://bpic.51yuansu.com/backgd/cover/00/63/09/64b52b1426fff_800.jpg?x-oss-process=image/resize,w_780/sharpen,100',
'https://img0.baidu.com/it/u=1113882577,3182192140&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
'https://img1.baidu.com/it/u=1179199327,1946315836&fm=253&fmt=auto&app=138&f=JPEG?w=1364&h=800',
'https://www4.bing.com//th?id=OHR.CopenhagenBicycles_ZH-CN3047958346_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp&w=360&h=202',
'https://www4.bing.com//th?id=OHR.CarnavalTenerife_ZH-CN1559136778_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp&w=360&h=202',
'https://www4.bing.com//th?id=OHR.StJamesPool_ZH-CN5930624359_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp&w=360&h=202',
],
tab: ['学术讨论组', '校园风景'],
transmitCount: 136,
@ -209,7 +218,7 @@ import PostView from "@/pages/common/postview/index.vue";
content: '是一个中文互联网高质量问答社区和创作者聚集的原创内容平台于2011年1月正式上线',
type: '1',
media: [
'https://tu.sioe.cn/gj/qiege/image.jpg',
'https://www4.bing.com//th?id=OHR.BambooPanda_ZH-CN8455481760_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp&w=360&h=202',
],
tab: ['校园风景'],
transmitCount: 13,
@ -230,8 +239,8 @@ import PostView from "@/pages/common/postview/index.vue";
content: '是一个中文互联网高质量问答社区和创作者聚集的原创内容平台于2011年1月正式上线',
type: '1',
media: [
'https://tu.sioe.cn/gj/qiege/image.jpg',
'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b'
'https://www4.bing.com//th?id=OHR.PlitviceWinter_ZH-CN0407572344_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp&w=360&h=202',
'https://www4.bing.com//th?id=OHR.HawkOwl_ZH-CN3401920167_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp&w=360&h=202'
],
tab: ['校园风景'],
transmitCount: 13,

View File

@ -79,7 +79,7 @@
<!-- <view class="flex justifyCenter"> -->
<view class="flex alignCenter justifyCenter">
<view class="flex justifyCenter alignCenter commentInput" @click="toInput()">
<image class="commentInput-img" src="../../../static/logo.png" mode=""></image>
<image class="commentInput-img" src="../../../static/images/icon/write-1.png" mode=""></image>
<text class="commentInput-text">友好评论~</text>
</view>
</view>
@ -185,10 +185,10 @@
content: '八年前,学弟在工地上杀了一个工友,上杀了一个工友,杀人前,他给警察打了电话,预告杀人的时间和地点,和地点,并......',
type: '1',
media: [
'https://tu.sioe.cn/gj/qiege/image.jpg',
'https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b',
'https://bpic.51yuansu.com/backgd/cover/00/63/09/64b52b1426fff_800.jpg?x-oss-process=image/resize,w_780/sharpen,100',
'https://img0.baidu.com/it/u=1113882577,3182192140&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
'https://img1.baidu.com/it/u=1179199327,1946315836&fm=253&fmt=auto&app=138&f=JPEG?w=1364&h=800',
'https://www4.bing.com//th?id=OHR.CopenhagenBicycles_ZH-CN3047958346_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp&w=360&h=202',
'https://www4.bing.com//th?id=OHR.CarnavalTenerife_ZH-CN1559136778_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp&w=360&h=202',
'https://www4.bing.com//th?id=OHR.StJamesPool_ZH-CN5930624359_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp&w=360&h=202',
],
tab: ['学术讨论组', '校园风景'],
transmitCount: 136,
@ -347,8 +347,9 @@ page{
}
.commentInput-img{
width: 40rpx;
height: 40rpx;
width: 36rpx;
height: 36rpx;
margin-right: 12rpx;
}
.commentInput-text{

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB