Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 6510fa88 编写于 作者: DCloud-yyl's avatar DCloud-yyl
浏览文件
操作

优化滚动折叠导航栏示例，适配web端，适配不同设备系统状态栏高度

上级 cd24449a
隐藏空白更改
内联 并排
Showing with 145 addition and 190 deletion
pages/template/scroll-fold-nav/scroll-fold-nav.uvue
浏览文件 @ 6510fa88
<template> <template>
<scroll-view @scroll="onScroll" class="scroll-view" rebound="false"> <scroll-view @scroll="onScroll" class="page" show-scrollbar="false">
<!--#ifdef APP--> <view ref="seatbar" class="seatbar"></view>
<view class="height-seat" style="height: 125px;">
<!-- 垫高专用 -->
</view>
<!--#endif-->
<!--#ifdef WEB-->
<view class="height-seat" style="height: 90px;">
<!-- 垫高专用 -->
</view>
<!--#endif-->
<view class="content"> <view class="content">
<view class="content-item"> <view class="content-item">
...@@ -23,197 +14,161 @@ ...@@ -23,197 +14,161 @@
</view> </view>
</view> </view>
<view ref="top-box" class="top-box"> <view ref="navigatorbar" class="navigatorbar">
<view ref="scroll-fold-nav" class="scroll-fold-nav"> <view class="titlebar">
<view class="nav-title">DCloud 为开发者而生</view> <view class="backview" @tap="back">
</view> <image class="back" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
<view @click="back" class="nav-back">
<image class="back-img" src="/static/template/scroll-fold-nav/back.png" mode="widthFix"></image>
</view>
<view ref="search" class="search" @click="toSearchPage">
<view class="search-inner">
<image class="search-img" src="/static/template/scroll-fold-nav/search.png" mode="widthFix"></image>
<text class="search-tip-text">请输入你要搜索的内容</text>
</view> </view>
<text class="search-btn">搜索</text> <text ref="title" class="title">DCloud 为开发者而生</text>
</view> </view>
</view> <view ref="searchbar" class="searchbar" @tap="search">
<image class="searchimg" src="/static/template/scroll-fold-nav/search.png" mode="widthFix"></image>
</scroll-view> <text class="searchinput">请输入你要搜索的内容</text>
</template> <text class="searchbutton">搜索</text>
</view>
</view>
</scroll-view>
</template>
<script> <script>
export default { //导航栏高度
data() { const NAVIBARHEIGHT = 88;
//搜索栏高度
const SEARCHBARHEIGHT = 40;
//返回键按钮宽度
const BACKWIDTH = 32;
export default {
data() {
return { return {
statusBarHeight: 35, statusBarHeight: 0,
scrollTop: 0, nviBarHeight: 0,
searchWidth: 700, naviElement: null as UniElement | null,
searchNode: null as UniElement | null, titleElement: null as UniElement | null,
boxNode: null as UniElement | null, searchElement: null as UniElement | null
navNode: null as UniElement | null }
}
}, },
onLoad() { }, onLoad() {
// #ifdef APP
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
// #endif
this.nviBarHeight = NAVIBARHEIGHT + this.statusBarHeight;
},
onReady() { onReady() {
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight ?? 35; this.naviElement = this.$refs['navigatorbar'] as UniElement;
this.searchNode = this.$refs['search'] as UniElement; this.searchElement = this.$refs['searchbar'] as UniElement;
this.boxNode = this.$refs['top-box'] as UniElement; this.titleElement = this.$refs['title'] as UniElement;
this.navNode = this.$refs['scroll-fold-nav'] as UniElement; //适配不同状态栏高度
}, this.naviElement?.style?.setProperty('padding-top', this.statusBarHeight+'px');
this.naviElement?.style?.setProperty('height', (NAVIBARHEIGHT+this.statusBarHeight)+'px');
let seatElement = this.$refs['seatbar'] as UniElement;
seatElement.style.setProperty('height', (NAVIBARHEIGHT+this.statusBarHeight)+'px');
},
methods: { methods: {
onScroll(e : ScrollEvent) { onScroll(e : ScrollEvent) {
let scrollTop = e.detail.scrollTop let offset = e.detail.scrollTop>SEARCHBARHEIGHT?SEARCHBARHEIGHT:e.detail.scrollTop;
// #ifdef APP this.naviElement?.style?.setProperty('height', (this.nviBarHeight -offset)+'px');
const originalBoxHeight = 125 this.searchElement?.style?.setProperty('left', BACKWIDTH*offset/SEARCHBARHEIGHT+'px');
// #else this.titleElement?.style?.setProperty('opacity', (1-offset/SEARCHBARHEIGHT));
const originalBoxHeight = 90
// #endif
this.boxNode?.style?.setProperty('height', (originalBoxHeight - (scrollTop > 35 ? 35 : scrollTop)) + 'px');
this.boxNode?.style?.setProperty('background-color', 'rgba(255, 255, 255, ' + (scrollTop * 3 > 100 ? 100 : scrollTop * 3) / 100.0 + ')');
this.navNode?.style?.setProperty('opacity', 1 - (scrollTop * 3 > 100 ? 100 : scrollTop * 3) / 100.0);
this.searchNode?.style?.setProperty('width', 700 - (scrollTop > 40 ? 40 : scrollTop) + 'rpx');
this.searchNode?.style?.setProperty('top', 0 - (scrollTop > 40 ? 40 : scrollTop) + 'px');
this.scrollTop = scrollTop;
}, },
back() { back() {
// uni.navigateBack() // 这么写用不了 uni.navigateBack();
// 这么写可以用
uni.navigateBack({
success(result) {
console.log('navigateBack success', result.errMsg)
},
fail(error) {
console.log('navigateBack fail', error.errMsg)
},
complete(result) {
console.log('navigateBack complete', result.errMsg)
},
})
// uni.switchTab({
// url:'/pages/tabBar/template'
// })
}, },
toSearchPage() { search() {
uni.showToast({ uni.showToast({
title: '暂不支持', title: '暂不支持',
icon: 'none' icon: 'none'
}); });
} }
}, }
}
} </script>
</script>
<style> <style>
.page { .page {
flex: 1; flex: 1;
background-color: #fbdf0d; background-color: #f5f5f5;
} }
.navigatorbar {
.scroll-view { position: fixed;
flex: 1; /* #ifdef APP */
} padding-top: 35px;
height: 124px;
.height-seat { /* #endif */
height: 110px; /* #ifdef WEB */
/* background-color: #fbdf0d; */ height: 88px;
} /* #endif */
border-bottom: 1px solid #efefef;
.content { width: 100%;
padding: 5px 15px; background-color: #f5f5f5;
background-color: #f5f5f5; }
} .titlebar {
flex-direction: row;
.content-item { align-items: center;
padding: 15px; height: 44px;
margin: 5px 0; }
background-color: #fff; .backview {
border-radius: 5px; width: 44px;
} height: 44px;
justify-content: center;
.text { align-items: center;
font-size: 14px; }
color: #666; .back {
line-height: 20px; width: 20px;
} }
.title {
.top-box { margin: 0px 2px;
position: fixed; }
top: 0; .searchbar {
width: 100%; position: absolute;
align-items: flex-end; bottom: 2px;
border-bottom: 1px solid #efefef; left: 0px;
/* #ifdef APP */ right: 0px;
height: 125px; background-color: #FFFFFF;
padding-top: 35px; border: 1px solid #fbdf0d;
/* #else */ height: 32px;
height: 90px; border-radius: 100px;
/* #endif */ margin: 6px 12px;
background-color: rgba(255, 255, 255, 0); padding: 8px;
background-color: aliceblue; flex-direction: row;
} align-items: center;
justify-content: center;
.scroll-fold-nav { }
height: 44px; .searchimg {
width: 100%; width: 15px;
justify-content: center; }
} .searchinput {
flex-grow: 1;
.nav-title { font-size: 12px;
margin-left: 30px; color: #666;
} }
.searchbutton {
.nav-back { font-size: 12px;
position: absolute; background-color: #ff6900;
/* #ifdef APP */ color: #FFF;
top: 46px; padding: 5px 8px;
/* #else */ border-radius: 100px;
top: 11px; }
/* #endif */ .seatbar {
left: 8px; /* #ifdef APP */
} height: 124px;
/* #endif */
.nav-back .back-img { /* #ifdef WEB */
width: 18px; height: 88px;
margin-top: 2px; /* #endif */
} }
.content {
.search { padding: 5px 15px;
background-color: #FFFFFF; }
border: 1px solid #fbdf0d; .content-item {
height: 35px; padding: 15px;
border-radius: 100px; margin: 5px 0;
margin: 0 12px; background-color: #fff;
padding: 8px; border-radius: 5px;
flex-direction: row; }
align-items: center; .text {
justify-content: space-between; font-size: 14px;
width: 96%; color: #666;
top: 0px; line-height: 20px;
} }
.search-inner { </style>
margin-top: 2px;
flex-direction: row;
}
.search-inner .search-img {
width: 15px;
}
.search-tip-text {
font-size: 12px;
color: #666;
}
.search-btn {
font-size: 12px;
background-color: #ff6900;
color: #FFF;
padding: 5px 8px;
border-radius: 100px;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或