微信小程序超过屏幕高度后显示底部图标

学而时习之微信小程序1.1

导语

本码农主业是后端，最近被产品嫌弃了微信小程序弹性盒子，身在小公司没有两三样技能傍身（都是泪。。），所以要兼顾前端和小程序。

微信云开发

微信开发者好像都能创建一个私人小程序了（记得19年的时候好像还只能测试号？？）微信小程序弹性盒子，而且又整出了云开发，上面集成了数据库（有点mongodb的感觉）,云函数（相当于后端接口），文件Ftp等功能，已经是一个简单但完整的服务器了。

麻雀虽小，五脏俱全嘛。

其免费版本对于普通应用应该是够用的。后面发现不够了可以买套餐。

作为后端，用的阿里的开源较多，现在用上了小程序开发，也感觉微信NB了。

小小的需求

页面超出了屏幕高度时在底部显示一个图标。很小的一个功能。实现起来也比较简单。

1.获取当前屏幕高度

倾向于直接在app.js的添加

this.globalData = {
	...//其他全局参数
	globalHeight: wx.getSystemInfoSync().windowHeight, //屏幕高度
	globalWidth: wx.getSystemInfoSync().windowWidth, //屏幕宽度
}

当然也可以在对应的page里面OnLoad或OnShow方法中加。

2.wxml

<view class="end-view" hidden="{{hideEndView}}">
   <image src="/images/end.png" class="end-view-img"></image>
</view>

3.wxss

.end-view {
 margin-top: 20rpx;
 margin-bottom: 30rpx;
 width: 100%;
 height: 100rpx;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
}
.end-view-img {
 width: 70rpx;
 height: 70rpx;
 background-size: cover;
 padding: 0px;
 background-color: white;
}

4.js

data定义

	... //其他参数
   hideEndView: true,

onShow方法，每一次显示都重置

 this.hideEndView = true
 this.setData({
   hideEndView: this.hideEndView,
 })

判断滚动距离

onPageScroll: function (e) {
   // console.log(e)
   if (e && e.scrollTop > 0) {
     this.hideEndView = false
     this.setData({
       hideEndView: this.hideEndView,
     })
   }
 },

结束