위 챗 애플 릿 이 scroll-view 고도 적응 문 제 를 완벽 하 게 해결 하 는 방법

첫 번 째 상황 은 스크롤-view 가 전체 화면 을 차지 합 니 다.

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: {
  //     
  loading: {
   type: Boolean,
   value: false,
  },
  //     
  finished: {
   type: Boolean,
   value: false,
  },
  //       
  finishedText: {
   type: String,
   value: "     ",
  },
  //          
  autoInit: {
   type: Boolean,
   value: true,
  },
  // flex      
  autoHeight: {
   type: Boolean,
   value: false,
  },
 },

 /**
  *        
  */
 methods: {
  /**
   *        
   */
  scrolltolower() {
   //     
   if (
    this.data.emptyText || //     
    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 의 고도 적응 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부탁드립니다!