小程序刘海屏适配考研打卡app小程序开发第三篇（细节处理）

安卓和小程序体验

小程序体验

安卓版本体验 安卓体验

1.异形屏适配问题

为了界面更美观，在开发过程中，我们往往会取消微信小程序自带的顶部导航栏，而去掉顶部导航栏之后，我们的页面就从手机最顶部开始展示。而这个时候如果不进行刘海屏的适配。

首先先介绍如何取消原生顶部栏

在页面的json文件中，加入

{
  "navigationStyle": "custom"
}

获取当前手机型号状态栏的高度（也就是刘海屏或者水滴屏的高度）

wx.getSystemInfo({
    success: e => {
      t.barheight = e.statusBarHeight; //状态栏高
    }
})

获取的宽度我们要应用在页面中，并且固定在顶部（如果有需要的话）

可以加上这样的前端代码

<view style="position:fixed;top:0rpx;width: 100%;background-color: #FFFFFF;height:{{barheight}}px">
    <view style="background-color:#FFFFFF;"></view>
  </view>

2.图标问题

令人头疼的就是ui设计，尤其是图标设计，好看的图标会让人伤心悦目。

推荐一个好看的图标库，阿里矢量图标库，是免费提供图标的。

矢量图标库

3.下拉刷新

首先在页面的json文件中开启下拉刷新

加入如下代码

{
  "enablePullDownRefresh": true,//开启下拉刷新
  "backgroundTextStyle": "dark"//设置下拉刷新的加载颜色
}

然后页面js文中中在onPullDownRefresh中执行需要刷新的方法

onPullDownRefresh: function(){
    this.onLoad()
}