业务需求:在页面某个固定区域滑动
思路:滑动高度 = 页面高度 - 自定义导航高度(不是自己自定义的导航可以省略)- 按钮高度 - 单词数高度
实现 : 1.数据展示区内使用scroll-view,设置y轴滚动(给固定高度=滑动高度)
2.计算展示区盒子的高度,仅在范围内允许滚动
3.保持页面固定,下拉触底时不能带动页面滚动
getScrollHeight() {
const that = this;
wx.getSystemInfo({
success: (res) => {
let systemInfo = wx.getSystemInfoSync();
//页面高度
let windowHeight = systemInfo.windowHeight;
// that.statusBarHeight = systemInfo.statusBarHeight;
// 胶囊位置信息
let rect = wx.getMenuButtonBoundingClientRect();
// that.menuButtonRect = JSON.parse(JSON.stringify(rect));
let navBarHeight =
(rect.top - systemInfo.statusBarHeight) * 2 + rect.height;
// this.navBarHeight = navBarHeight;
// 自定义导航栏的高度
let height = systemInfo.statusBarHeight + navBarHeight;
let query = wx.createSelectorQuery().in(that);
query.select(".nav-btn").boundingClientRect();
query.select(".collect-btn").boundingClientRect();
query.select(".nav-bg").boundingClientRect();
query.exec((res) => {
let h1 = res[0].height;
let h2 = res[1].height;
let h3 = res[2].height;
that.navBgHeight = h3;
let scrollHeight = windowHeight - h1 - h2 - height;
that.scrollHeight = scrollHeight;
});
},
});
},
//HTML
<scroll-view
scroll-y
scroll-with-animation
@scrolltolower="handleScrolltolower"
class="bs scroll-view"
:style="{ maxHeight: `${scrollHeight}px` }"
>
<view
style="padding: 0 30rpx 30rpx 30rpx"
v-if="navList[0].isActivation"
>
<collect-list @toTranslate="toTranslate" ref="collectList" />
</view>
<sign-list
@cancelSign="cancelSign"
v-if="navList[2].isActivation || navList[1].isActivation"
/>
</scroll-view>
scroll-view的事件。
bindscrolltoupper 触顶事件,放入下拉刷新处理方法
bindscrolltolower 触底事件,放入触底加载处理方法
根据自己的需要添加
触底之后可能会出现父盒子会下拉,导致出现页面空白bug
解决方法==>在pages.json文件夹加上"disableScroll":true 属性
{
"path": "pages/tabbar/collect",
"style": {
"navigationBarTitleText": "收藏",
"navigationStyle": "custom",
"disableScroll":true
}
},