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

学而时习之微信小程序1.1

导语
微信云开发
小小的需求
- 1.获取当前屏幕高度
- 2.wxml
- 3.wxss
- 4.js
结束

导语

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

微信云开发

微信开发者好像都能创建一个私人小程序了（记得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 = truethis.setData({hideEndView: this.hideEndView,})

判断滚动距离

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

结束

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

微信小程序例子——使用icon组件显示常用图标
1.效果展示 2.关键代码 3.源代码获取方式百度云链接:http://pan.baidu.com/s/1hsNoIK8 密码:sdi0 4.在使用icon组件显示常用图片的过程中有遇到任何问题或者 ...
微信小程序获取视口高度,设置 video 视频全屏显示
微信小程序获取视口高度获取视口高度可用于设置视频全屏显示效果及其他效果显示 js中:(可以在onLoad中直接使用,或写入方法中) let that = this;// 获取系统信息wx.ge ...
@所有人，官网下载的微信小程序开发工具安装后黑屏咋办？
@所有人,官网下载的微信小程序开发工具安装后黑屏咋办? 一直这样,重复安装也是这样欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器所展示的欢迎页.如果你想学习如何使 ...
微信小程序关注公众号模板显示隐藏问题
微信小程序关注公众号模板显示隐藏问题最近做了一个微信小程序内跳转关注公众号的需求,本来按照API的写法是可以直接搞定的.但是产品需求是要点击按钮之后,再弹出关注公众号组件,然后点击关闭按钮之后要关掉 ...
微信小程序背景图真机显示不了
微信小程序在本地开发工具正常显示图片(包括背景图),在真机显示不了,常见的几种情况: 1.微信小程序背景图真机显示不了微信小程序如何设置背景图片? | 微信开放社区微信小程序设置背景图片不显示问题 ...
微信小程序加载并且编译显示富文本编辑器内容
微信小程序如何加载并且显示百度编辑器中的内容一. 下载wxParse文件夹放在根目录下(可以随意更改位置,只要后续能引入成功即可) 二. 在js文件中引入wxParse.js var WxParse ...
微信小程序背景图片全屏显示
微信小程序背景图片全屏显示很多人在写小程序界面的时候希望背景图片是全屏覆盖显示的(包括顶部导航栏,如下图),那该如何实现呢? 以下是实现代码: wxml代码: <view class=&quo ...
微信小程序中苹果iOS手机显示时间格式NaN不正确的问题
项目场景: 实现安卓Android和苹果iOS中微信小程序显示订单时间信息问题描述微信小程序中苹果iOS手机显示时间格式NaN不正确的问题原因分析: 安卓微信小程序显示正常,苹果按格式YYYY- ...
微信小程序页面跳转后定时器如何关闭
微信小程序页面跳转后定时器如何关闭 1.在页面中定义,定时器形参,并在跳转到其它页面后,在隐藏和未加载中删除定时器 Page({data: {timer:'',//定义定时器形参,为空字符在这里插入代 ...