小程序-js-scroll-view组件高度-页面上下滚动
<scroll-view scroll-y="true" style="height:{{_scrollViewHeight}}rpx;" class='scroll_height'>
onLoad: function (options) { // onLoad方法中调用
_this = this;
wx.getSystemInfo({
success: function (res) {
console.info(res.windowHeight);
let height = res.windowHeight;
wx.createSelectorQuery().selectAll('.scroll_height').boundingClientRect(function (rects) {
//样式 scroll_height 要加点
rects.forEach(function (rect) {
var h = pxToRpxWidth(res.windowHeight - rect.bottom-16);
// 注意这里调整的是px的单位 可尝试 rect.top //注意相应的布局单位要统一
_this.setData({
_scrollViewHeight: h - 90 //这里按rpx单位调整
});
})
}).exec();
}
});
},
function pxToRpxWidth(pxComponentWidth) { //px转rpx 是不是一定限制为宽度？后期继续测试
try {
var res = wx.getSystemInfoSync()
var pxWindowWidth = res.windowWidth
var rpxComponentWidth = 750 * (pxComponentWidth) / pxWindowWidth;
return rpxComponentWidth;
} catch (e) {
// Do something when catch error
}
return null;
}
上下滚动的问题
在含有scroll-view组件的页面中如果有上下混动的问题，可以使用
page{
overflow-y: hidden;
}
但是要注意在长页面环境或者无scroll-view的页面中，可能都在整个页面不能滑动，要特别测试。
正文到此结束
热门推荐
近期评论
-
来自： 运维-docker专题-创建镜像-操作容器-制作jdk17的docker镜像等
-
来自： 留言板
-
来自： 留言板
-
来自： js-处理网页图片宽度自适应屏幕宽度
-
来自： 留言板
