网站建设公司服,wordpress视频源码,怎样建设企业网站 用于宣传,wordpress是php吗自适配高度 自定义的顶部导航栏#xff0c;可参考博文 https://blog.csdn.net/weixin_41192489/article/details/134852124
如图可见#xff0c;在页面滚动过程中#xff0c;顶部导航栏和底栏未动#xff0c;仅中间的内容区域可滚动。
整个页面的高度设置为 100%#xf… 自适配高度 自定义的顶部导航栏可参考博文 https://blog.csdn.net/weixin_41192489/article/details/134852124
如图可见在页面滚动过程中顶部导航栏和底栏未动仅中间的内容区域可滚动。
整个页面的高度设置为 100%并采用 flex 布局滚动区域的高度通过flex布局的flex-grow实现自适配
template!-- 顶部--自定义的导航栏 --CustomNavbar /!-- 中间--自适配高度的滚动区 --scroll-view scroll-y classcontentBox!-- 此处省略了页面内容的相关代码 --/scroll-view
/templatestyle langscss
page {background-color: #f7f7f7;// 总容器高度撑满屏幕height: 100%;// 使容器内元素使用flex布局display: flex;flex-direction: column;
}
.contentBox {// 滚动区自适配高度flex-grow: 1;
}
/style注意事项此处样式不能加 scoped 下拉刷新 在 scroll-view 标签上新增 refresher-enabledrefresherrefreshonRefresherrefresh:refresher-triggeredisTriggeredjs中新增
// 控制下拉刷新动画的显隐
const isTriggered ref(false)
// 自定义下拉刷新被触发
const onRefresherrefresh async () {// 开启下拉刷新动画isTriggered.value true// 重置子组件猜你喜欢分页相关数据页码重置为1清空列表结束标记重置为falseguessRef.value?.resetData()// 加载数据--所有接口同时开始刷新直到耗时最长的接口返回数据await Promise.all([getSwiperInfo(), getCategoryInfo(), guessRef.value?.getGuessList()])// 关闭下拉刷新动画isTriggered.value false
}
