众所周知，小程序不支持操作dom元素，但最近公司做了这样的一个功能，滚动scrollview 标签，当页面滚动到一定的高度时，给页面一个固定导航，并且还要执行下拉加载的方法。由于在官方文档的说明中，使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。但是设置了高度的时候，下拉加载的方法就不好使了。这时候我们要根据滚动的高度来设置不同的高度，部分代码如下：
<scroll-view scroll-y="true" style="height: {{scrollViewHeight}}rpx;" bindscroll="scrollviewScroll" bindscrolltolower="getNextPage">
<view class="brand">
<image class="brand-image" src="{{logo_url}}" mode="widthFix" />
<text class="description">{{description}}</text>
</view>
<view class="tab" style="position:{{fixedTop ? 'fixed' : 'static'}}">
JS
scrollviewScroll:function(e){
var viewScrollTop = e.detail.scrollTop;
var scrollTop = this.data.scrollTop;
if(viewScrollTop > scrollTop){
this.setData({
fixedTop:true
});
}else{
this.setData({
fixedTop:false
});
};
},
wx.getSystemInfo({
success: function (res) {
var scrollViewHeight = 750 * res.windowHeight / res.windowWidth; //rpx
console.log(res.windowWidth)
var scrollTop = res.windowWidth * 400 / 750; //矢量转换后的高度
that.setData({
scrollViewHeight: scrollViewHeight,
scrollTop: scrollTop,
fixedTop: false
});
}
}); |
