微信小程序完美解決scroll-view高度自適應問題的方法
更新時間：2020年08月08日 09:09:51 作者：huzedong2015
這篇文章主要介紹了微信小程序完美解決scroll-view高度自適應問題的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
第一種情況，scroll-view占據(jù)整屏
scroll-view {
height: 100vh;
}
第二種情況，scroll-view自適應頁面剩余高度
xml文件
<view class="box"> <view class="box-head"></view> <scroll-view class="box-scroll"></scroll-view> </view>
wxss文件
.box {
display: flex;
flex-direction:column;
height:100vh;
overflow:hidden;
}
.box-head {
flex-shrink: 0;
height: 50px;
}
.box-scroll {
flex: 1;
height: 1px;
}
flex：1 高度依然不會自適應加一個默認高度1px就可以自適應了
通用組件化處理
list.wxml
<scroll-view
class="list-scroll {{ autoHeight ? 'list-scroll--auto' : '' }}"
scroll-y
enable-back-to-top
bind:scrolltolower="scrolltolower"
>
<slot></slot>
<!-- 加載完成 -->
<view wx:if="{{ finished }}" class="list-loading">
<view class="list-loading__text">{{ finishedText }}</view>
</view>
<!-- 加載效果 -->
<view wx:elif="{{ loading }}" class="list-loading">
<van-loading type="spinner" size="20"></van-loading>
</view>
</scroll-view>
list.scss(需編譯成list.wxss)
.list {
&-scroll {
flex: 1;
height: 100vh;
&--auto {
height: 1px;
}
}
&-loading {
margin: 10px 0;
text-align: center;
&__text {
font-size: 16px;
color: #a6a6a6;
line-height: 1;
}
}
}
list.js
// components/list/list.js
Component({
externalClasses: ["class"],
options: {
virtualHost: true, // 組件虛擬化
},
/**
* 組件的屬性列表
*/
properties: {
// 加載狀態(tài)
loading: {
type: Boolean,
value: false,
},
// 加載完成
finished: {
type: Boolean,
value: false,
},
// 加載完成文字
finishedText: {
type: String,
value: "沒有更多了",
},
// 自動初始化獲取數(shù)據(jù)
autoInit: {
type: Boolean,
value: true,
},
// flex自定適應高度
autoHeight: {
type: Boolean,
value: false,
},
},
/**
* 組件的方法列表
*/
methods: {
/**
* 滾動到底部閾值
*/
scrolltolower() {
// 退出執(zhí)行
if (
this.data.emptyText || // 沒有數(shù)據(jù)
this.data.loading || // 正在加載
this.data.finished // 加載完成
) {
return;
}
this.setData({
loading: true,
});
this.triggerEvent("load");
},
},
/**
* 組件聲明周期
*/
lifetimes: {
attached() {
// 自動初始化
if (this.data.autoInit) {
this.scrolltolower();
}
},
},
});
組件化后一定要設置組件虛擬化。否則高度還是不會自適應
list.json
"component": true,
"usingComponents": {
"van-loading": "@vant/weapp/loading/index"
}
需要安裝van-loading或者自己寫一個loading效果
使用
全屏
<com-list></com-list>
自適應
<com-list auto-height></com-list>
到此這篇關于微信小程序完美解決scroll-view高度自適應問題的方法的文章就介紹到這了,更多相關小程序scroll-view高度自適應內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
JavaScript暫時性死區(qū)以及函數(shù)作用域
這篇文章主要為大家介紹了JavaScript暫時性死區(qū)以及函數(shù)作用域示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
JavaScript內(nèi)置對象math,global功能與用法實例分析
這篇文章主要介紹了JavaScript內(nèi)置對象math,global功能與用法,結(jié)合實例形式分析了javascript中內(nèi)置對象math與global的基本概念、功能及使用方法,需要的朋友可以參考下2019-06-06
基于jstree使用AJAX請求獲取數(shù)據(jù)形成樹
這篇文章主要為大家詳細介紹了基于jstree使用AJAX請求獲取數(shù)據(jù)形成樹，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇博客文章是為初級到中級JavaScript開發(fā)人員所寫,主要為大家介紹了JavaScript模運算符理解及運用實戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步2023-11-11
這篇文章主要介紹了javascript去掉代碼里面的注釋的方法和具體代碼，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要為大家詳細介紹了集合Bootstrap自定義confirm提示效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)隨機點名程序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
這篇文章主要介紹了uni-app 自定義底部導航欄的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)多列選擇器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
彈球游戲，一般都是使用html5來實現(xiàn)的，其實不然，使用js也可以實現(xiàn)類似的效果，下面有個不錯的示例，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-09