uni-appのフロントエンドフレームワークを使って、プルダウンしてデータを更新すると下に空白ができるので、画面の残りの高さをscorll-viewで自動的に埋める方法について、いろいろ発見しました。インターネット上にいくつかのチュートリアルがありますが、詳細は十分ではありません。今回は学習過程の記録となるはずです！困っている友達はそれを持ち帰って見てみることができます。
アイデア:
1. uni.getSystemInfo(OBJECT) API インターフェイスを使用してデバイスの画面の高さを取得します
2. uni.createSelectorQuery() を使用して、要素から画面の上部までの距離を取得します。
実装プロセス:
1. ページ部分のコード（取得が必要な部分のみ、その他の部分は状況に応じて記述します）
// 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. コードの JS 部分の主な考え方は次のとおりです。画面の目に見える高さ - 上からの要素の高さ = 画面の残りの高さ (要素の高さ)。
データ部分のコード: データを受け入れるパラメータを事前に定義します。
// data部分的代码
data() {
return {
pH:0, //窗口高度
navHeight:0, //元素的所需高度
}
},
コードの onReady 部分: ページが更新されるたびに高さを取得します
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()
}
})
},