您好,登錄后才能下訂單哦!
這篇文章主要介紹了微信小程序中scroll-view高度自適應(yīng)問題怎么辦解決,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
第一種情況,scroll-view占據(jù)整屏
scroll-view { height: 100vh; }
第二種情況,scroll-view自適應(yīng)頁面剩余高度
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 高度依然不會(huì)自適應(yīng)加一個(gè)默認(rèn)高度1px就可以自適應(yīng)了
通用組件化處理
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: "沒有更多了", }, // 自動(dòng)初始化獲取數(shù)據(jù) autoInit: { type: Boolean, value: true, }, // flex自定適應(yīng)高度 autoHeight: { type: Boolean, value: false, }, }, /** * 組件的方法列表 */ methods: { /** * 滾動(dòng)到底部閾值 */ scrolltolower() { // 退出執(zhí)行 if ( this.data.emptyText || // 沒有數(shù)據(jù) this.data.loading || // 正在加載 this.data.finished // 加載完成 ) { return; } this.setData({ loading: true, }); this.triggerEvent("load"); }, }, /** * 組件聲明周期 */ lifetimes: { attached() { // 自動(dòng)初始化 if (this.data.autoInit) { this.scrolltolower(); } }, }, });
組件化后一定要設(shè)置組件虛擬化。否則高度還是不會(huì)自適應(yīng)
list.json
"component": true, "usingComponents": { "van-loading": "@vant/weapp/loading/index" }
需要安裝van-loading或者自己寫一個(gè)loading效果
使用
全屏
<com-list></com-list>
自適應(yīng)
<com-list auto-height></com-list>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享微信小程序中scroll-view高度自適應(yīng)問題怎么辦解決內(nèi)容對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問題就找億速云,詳細(xì)的解決方法等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。