1. It is required that the scrolling of the search box list on the home page is fixed at the top
2. Solution
1. The bottom tabbar is a custom height of 184rpx
2. The top navbar is a custom height of 44px
3. Use uni.getSystemInfo to obtain the status bar in the mounted life function Height
4. The search box uses position:sticky; sticky positioning
5. Use dynamic style, the height of top is the obtained status bar height + 44 px
<template>
<view class="content">
<!-- 自定义navbar -->
<u-navbar back-text="首页" :border-bottom="true" back-icon-size="40"
:back-text-style="{ fontWeight: 600 }" height="44"></u-navbar>
<view class="search-wapper" :style="{top: `${statusBarHeight + 44}px`}">
<view class="search">
<u-search placeholder="搜索站点或者设备编号" disabled bg-color="#FFFFFF" @click="getFocus" :show-action="false">
</u-search>
<view class="classify" @click="setScreen">
<u-icon name="list" size="40"></u-icon>
</view>
</view>
</view>
<view class="list">
<view v-for="i in 10" class="item" :key="i">
<view class="item-A">
<view>城南信号塔站 | 中国电信荆州分公司</view>
<view @click="setScreen">
<u-icon name="arrow-right" size="35"></u-icon>
</view>
</view>
<view class="item-B">
系统输出电流：100.1 mA
</view>
<view class="item-C">
<view>铝空剩余容量：85.1%</view>
<view>运行·自动模式</view>
</view>
</view>
</view>
<screen :showModal="screenShow" @close="onclose"></screen>
<tabbar></tabbar>
</view>
</template>
<script>
import tabbar from '../../component/tabbar.vue';
import screen from '../../component/screen.vue'
export default {
components: {
tabbar,
screen,
},
data() {
return {
background: 'transparent',
searchVal: '',
screenShow: false,
statusBarHeight :'',
}
},
onPullDownRefresh() {
console.log('下拉刷新')
},
onReachBottom() {
console.log('触底了')
},
mounted() {
uni.getSystemInfo({
//获取系统信息
success: res => {
this.statusBarHeight = res.statusBarHeight//状态栏的高度
console.log(this.statusBarHeight)
},
fail(err) {
console.log(err);
}
})
},
methods: {
/*点击搜索*/
getFocus() {
console.log('点击搜索框')
uni.navigateTo({
url: '/pages/search-history/index'
})
},
/*点击筛选*/
setScreen() {
console.log('筛选')
this.screenShow = true;
},
/*popup回调*/
onclose(show) {
this.screenShow = show
}
}
}
</script>
<style lang="scss" scoped>
.content {
width: 100vw;
background: #F8FAFF;
box-sizing: border-box;
padding: 0rpx 44rpx 184rpx 46rpx;//底部tabbar高度是184rpx
}
.content /deep/ .u-icon-wrap u-icon {
display: none;
}
.content /deep/ .u-content {
box-shadow: 0px 4px 16px 2px rgba(106, 106, 106, 0.2);
}
.search-wapper {
height: 114rpx;
box-sizing: border-box;
display: flex;
align-items: center;
position: sticky;
background-color: #F8FAFF;
z-index: 100;
}
.search {
width: 100%;
position: relative;
}
.search /deep/ .u-icon-wrap u-icon {
display: inline-block;
}
.classify {
position: absolute;
right: 20rpx;
top: 50%;
transform: translateY(-50%);
z-index: 100;
}
.list {
width: 100%;
box-sizing: border-box;
flex: 1;
.item {
width: 96%;
height: 220rpx;
background: #FFFFFF;
box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(106, 106, 106, 0.2);
border-radius: 36rpx;
margin: 10rpx auto 30rpx;
padding: 30rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
.item-A {
display: flex;
justify-content: space-between;
align-items: center;
}
.item-B {
}
.item-C {
display: flex;
justify-content: space-between;
align-items: center;
>view {
&:nth-child(2) {
font-weight: 600;
font-size: 24rpx;
color: #21C0D5;
font-size: 24rpx;
}
}
}
}
}
</style>
