android固定头部及解决转态栏遮挡问题

最新推荐文章于 2022-08-03 20:02:20 发布

谷韻纖塵

最新推荐文章于 2022-08-03 20:02:20 发布

阅读量430

点赞数

文章标签： es6 reactjs web app html5

本文链接：https://blog.csdn.net/qq_40664426/article/details/114013098

版权

本文介绍如何在Android应用中实现搜索列表的固定头部，并解决状态栏遮挡问题。通过设置组件props，包括head（顶部搜索框）和children（城市列表），并提供了组件代码示例。

摘要由CSDN通过智能技术生成

手机搜索列表布局

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

提供一个头部固定，内容可滚动的组件，并自定获取到手机转态栏高度，可解决手机状态栏遮挡问题。适用于Android、iOS。

# 一、效果图

城市列表使用

城市列表使用该组件所产生的效果图

二、props

1.head

固定在顶部的输入属性。如：效果图头部搜索框区域。

2.children

如效果图城市列表区域：

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

该处使用的url网络请求的数据。

三、组件代码

import React, {
    PureComponent } from 'react';
/**
 * 页面载入plus后的回调
 * @param {function} func 
 */
const plusReady = (func) => {
   
    if (window.plus) {
   
        func();
    } else {
   
        document.addEventListener('plusready'