uniapp은 스크롤 높이를 설정합니다.

Uniapp은 Vue.js 프레임워크를 기반으로 하는 크로스 플랫폼 애플리케이션 개발 도구로, 여러 플랫폼(iOS, Android, H5)용 애플리케이션을 빠르게 구축할 수 있습니다. Uniapp으로 개발하다 보면 스크롤 높이를 설정해야 하는 경우가 자주 발생합니다. 따라서 이번 글에서는 Uniapp에서 스크롤 높이를 설정하는 방법을 소개하겠습니다.

1. 페이지의 스크롤 높이 설정

1. 템플릿에 스크롤 뷰 태그 추가

페이지 작성 시 템플릿에 스크롤 뷰 태그를 추가하여 페이지를 스크롤할 수 있습니다. 동시에 페이지를 스크롤할 수 있도록 스크롤 뷰의 높이도 설정해야 합니다.

예를 들어 템플릿에 다음 코드를 추가합니다.

<template>
  <scroll-view style="height: 1000rpx;">
    <!-- 页面内容 -->
  </scroll-view>
</template>

이 예에서는 스크롤 뷰 높이를 1000rpx로 설정했습니다.

2. 페이지 수명 주기 후크 기능에서 스크롤 높이 계산

템플릿에서 스크롤 보기 높이를 설정하는 것 외에도 페이지 수명 주기 후크 기능에서 스크롤 높이를 계산할 수도 있습니다.

예를 들어 페이지의 onLoad 후크 함수에서 다음과 같이 스크롤 높이를 계산할 수 있습니다.

<template>
  <scroll-view :style="{height: scrollHeight + 'rpx'}">
    <!-- 页面内容 -->
  </scroll-view>
</template>

<script>
  export default {
    data() {
      return {
        scrollHeight: 0
      };
    },
    onLoad() {
      // 获取屏幕高度
      const screenHeight = uni.getSystemInfoSync().screenHeight;
      // 计算scroll-view的高度
      const scrollHeight = screenHeight - 100;  // 100为非内容区高度
      // 更新scroll-view的高度
      this.scrollHeight = scrollHeight;
    }
  }
</script>

이 예에서는 변수 scrollHeight를 사용하여 스크롤 뷰의 높이를 나타내며 초기 값은 다음과 같습니다. 0. 페이지의 onLoad 후크 함수에서는 uni.getSystemInfoSync() API를 통해 화면 높이를 가져오고 화면 높이를 기준으로 스크롤 뷰의 높이를 계산했습니다. 마지막으로 계산된 스크롤 뷰 높이를 scrollHeight 변수에 할당하여 페이지의 스크롤 높이를 업데이트합니다.

2. 구성 요소의 스크롤 높이를 설정합니다.

페이지 스크롤 높이 외에도 구성 요소의 스크롤 높이를 설정해야 하는 경우가 있습니다. Uniapp은 여러 구성 요소 간에 코드를 공유할 수 있는 믹스인 모드를 제공합니다. 믹스인 패턴을 사용하여 구성 요소의 스크롤 높이를 설정할 수 있습니다.

1. 믹스인 만들기

우선 Uniapp 프로젝트에서 믹스인을 만들어야 합니다. 프로젝트 루트 디렉토리의 "/common/mixins/" 폴더에 새로운 "scrollHeightMixin.js" 파일을 생성하여 믹스인 코드를 저장합니다.

export default {
  data() {
    return {
      scrollHeight: 0
    };
  },
  mounted() {
    // 获取屏幕高度
    const screenHeight = uni.getSystemInfoSync().screenHeight;
    // 计算scroll-view的高度
    const scrollHeight = screenHeight - 100;   // 100为非内容区高度
    // 更新scroll-view的高度
    this.scrollHeight = scrollHeight;
  }
};

이 예에서는 scrollHeight라는 변수를 포함하는 scrollHeightMixin이라는 믹스인을 정의합니다. 믹스인의 마운트된 후크 기능에서는 uni.getSystemInfoSync() API를 사용하여 화면 높이를 얻고, 화면 높이를 기준으로 스크롤 뷰의 높이를 계산합니다. 마지막으로 계산된 스크롤 뷰 높이를 scrollHeight 변수에 할당하여 구성 요소의 스크롤 높이를 얻습니다.

2. 컴포넌트에서 믹스인 사용

다음으로, 이전에 정의한 믹스인을 컴포넌트에 도입해야 합니다. 구성 요소의 스크립트 태그에 다음 코드를 추가합니다.

<script>
  import ScrollHeightMixin from "@/common/mixins/scrollHeightMixin.js";
  export default {
    mixins: [ScrollHeightMixin],
    // 组件其他内容
  };
</script>

이 예에서는 import 문을 사용하여 이전에 정의한 믹스인을 구성 요소에 도입합니다. 그런 다음 구성 요소가 mixin에 정의된 scrollHeight 변수를 사용할 수 있도록 mixins 속성에 mixin을 추가합니다.

마지막으로 구성 요소의 템플릿 태그에 있는 스크롤 뷰 태그를 사용하고 스크롤 뷰의 높이를 믹스인에 정의된 스크롤 높이 변수 값으로 설정할 수 있습니다.

<template>
  <scroll-view :style="{height: scrollHeight + 'rpx'}">
    <!-- 组件内容 -->
  </scroll-view>
</template>

이 예에서는 스크롤 뷰의 높이를 믹스인에 정의된 scrollHeight 변수 값으로 설정했습니다.

요약:

이 글에서는 Uniapp을 사용하여 페이지 스크롤 높이와 컴포넌트 스크롤 높이를 설정하는 방법을 소개합니다. 페이지 스크롤 높이의 경우 템플릿에서 스크롤 보기 높이를 설정하거나 페이지의 수명 주기 후크 기능에서 스크롤 높이를 계산할 수 있습니다. 구성요소 스크롤 높이의 경우 믹스인 모드를 사용하여 이를 달성할 수 있습니다. 이 기사가 Uniapp 개발 시 스크롤 높이를 설정하는 데 도움이 되기를 바랍니다.

위 내용은 uniapp은 스크롤 높이를 설정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!