安卓和小程序体验
小程序体验
安卓版本体验 安卓体验
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设计,尤其是图标设计,好看的图标会让人伤心悦目。
推荐一个好看的图标库,阿里矢量图标库,是免费提供图标的。
扫描二维码关注公众号,回复:
11065176 查看本文章
3.下拉刷新
首先在页面的json文件中开启下拉刷新
加入如下代码
{
"enablePullDownRefresh": true,//开启下拉刷新
"backgroundTextStyle": "dark"//设置下拉刷新的加载颜色
}
然后页面js文中中在onPullDownRefresh中执行需要刷新的方法
onPullDownRefresh: function(){
this.onLoad()
}