在使用小程序开发时,底部为自定义导航栏,在使用scroll-view滚动页面时,滚动到底部时最后一条或多条数据被导航栏遮挡,如下:
解决方案:
1.获取用户手机宽度和高度
let deviceWidth = wx.getSystemInfoSync().windowWidth;//获取屏幕宽度
let deviceHeight = wx.getSystemInfoSync().windowHeight;//获取屏幕高度
2.我的导航栏高度单位为rpx,那就需要将页面所有控件改为rpx,同时将获取的屏幕高度转为rpx
以下转自jiaojiaoiso:
①rpx转px
// rpx 转换为 px ,传参类型是数字(Number)
export function rpxTopx(rpx) {
let deviceWidth = wx.getSystemInfoSync().windowWidth; //获取设备屏幕宽度
let px = (deviceWidth / 750) * Number(rpx)
return Math.floor(px);
}
②px转rpx
// px 转换为 rpx ,传参类型是数字(Number)
export function rpxTopx(px) {
let deviceWidth = wx.getSystemInfoSync().windowWidth; //获取设备屏幕宽度
let rpx = (750 / deviceWidth) * Number(px)
return Math.floor(rpx);
}
转换完成之后,设置scroll-view高度,将屏幕高度减去距离顶部的高度,再减去导航栏高度即可。
3.单位为px的,获取完高度后直接减
4.代码
js文件:
async onLoad(options) {
var that = this;
//获取系统的参数,scrollHeight数值,微信必须要设置style:height才能监听滚动事件
let deviceWidth = wx.getSystemInfoSync().windowWidth;
let deviceHeight = wx.getSystemInfoSync().windowHeight;
let rpx = (750 / deviceWidth) * Number(parseInt(deviceHeight));
that.setData({
scrollHeight: Math.floor(rpx)-240-130//240为距离顶部高度,130为距离底部高度,即导航栏高度
});
}
wxml文件:
<view style="position: fixed;width: 100%;top: 240rpx;">
<scroll-view scroll-y="true" style="width: 100%;height: {{scrollHeight}}rpx;">
<view wx:for="{{listData}}" wx:for-item='item' style="padding:10px;border:#8a8a8a solid 1px; font-size: 10px;color: darkgrey;">
<view><text>项目名称:</text></view>
<view><text>立项批复日期:</text></view>
...
</view>
</scroll-view>
</view>
5.结果