Using the front-end framework of uni-app, you need to pull down to refresh the data. There will be blank space below, that is, how to make scorll-view automatically fill the remaining height on the screen. I found a lot of tutorials on the Internet, but the details are not enough. too much. This time it should be a record in the learning process! Friends in need can take it away and have a look.
Ideas:
1. Use the uni.getSystemInfo(OBJECT) API interface to get the device screen height
2. Use uni.createSelectorQuery() to get the distance from the element to the top of the screen
Implementation process:
1. The code of the page part (only put the part that needs to be obtained, and other parts according to the situation)
// scroll-view的代码 class名为sv 使用:style动态绑定高度
<scroll-view scroll-y="true" class="sv" :style="{height:navHeight+'px'}">
<view class="listItem" v-for="(item,index) in tvArry" :key="index" @click="skip">
<view class="leftBox">
<image :src="item.themb" class="leftImg"></image>
</view>
<view class="rightBox">
<view class="title">{
{
item.name}}</view>
<view class="sTitle">
{
{
item.name}}{
{
item.time}}
</view>
</view>
</view>
</scroll-view>
2. The main idea of the JS part of the code is: through the visible height of the screen - the height of the element from the top = the remaining height of the screen (height of the element);
The code in the data part: define the parameters that accept data in advance.
// data部分的代码
data() {
return {
pH:0, //窗口高度
navHeight:0, //元素的所需高度
}
},
onReady part of the code: get the height every time the page is refreshed
onReady() {
let that=this;
uni.getSystemInfo({
//调用uni-app接口获取屏幕高度
success(res) {
//成功回调函数
that._data.pH=res.windowHeight //windoHeight为窗口高度，主要使用的是这个
let titleH=uni.createSelectorQuery().select(".sv"); //想要获取高度的元素名（class/id）
titleH.boundingClientRect(data=>{
let pH=that._data.pH;
that._data.navHeight=pH-data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
}).exec()
}
})
},