1. 首页
  2. 微信小程序

考研打卡app小程序开发第三篇(细节处理)

安卓和小程序体验

小程序体验

考研打卡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()
}

 

原创文章,作者:程序员凯小白,如若转载,请注明出处:http://www.kaixiaobai.com/archives/556

发表评论

登录后才能评论

联系我们

qq

在线咨询:点击这里给我发消息

邮件:1298646637@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息