uniapp은 스크롤바를 제거합니다

모바일 애플리케이션의 인기와 함께 Vue.js 기반의 크로스엔드 애플리케이션 개발 프레임워크인 uniapp은 여러 플랫폼에서 널리 사용됩니다. 여기서 제가 논의하고 싶은 것은 애플릿에서 uniapp의 기본 스크롤바를 제거하는 방법입니다.

기본적으로 미니 프로그램의 Swiper 및 ScrollView와 같은 구성 요소는 iOS 및 Android에서 스크롤 막대를 표시하지만 업계에서는 때때로 이러한 스크롤 막대를 숨길 필요가 있습니다. 그렇다면 이러한 스크롤 막대를 어떻게 제거합니까? 다음으로 구체적인 솔루션을 제공해 드리겠습니다.

uniapp 애플릿의 스크롤 막대는 기본적으로 WeChat 클라이언트에서 제공되며, WeChat 클라이언트는 작동을 위해 해당 API를 노출하지 않습니다. 따라서 스크롤 막대를 제거하려면 개발 프레임워크 uniapp부터 시작해야 합니다.

방법 1: 페이지 스타일 설정

App.vue에 다음 코드 추가:

<style>
  /* 去掉小程序swiper组件的滚动条 */
  .swiper-container, .swiper-wrapper, .swiper-slide {
    overflow: hidden !important;
  }
  /* 去掉小程序scroll-view组件的滚动条 */
  .scroll-view {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .scroll-view::-webkit-scrollbar {
    display: none !important;
  }
</style>

스크롤 보기의 -scrollbar-width 및 -ms-overflow-style을 없음으로 설정하고 ::를 전달합니다. -webkit-scrollbar는 스크롤 막대를 보이지 않게 설정하여 스크롤 막대를 제거합니다.

그러나 이 방법의 단점은 페이지가 더 복잡해지면 페이지 스타일이 혼란스러워질 수 있다는 것입니다.

방법 2: 플러그인 사용

uniapp의 플러그인 마켓에는 "uni-ui"라는 컴포넌트 라이브러리가 있습니다. 이 컴포넌트 라이브러리에는 "uni-list"라는 컴포넌트가 있습니다. 사용자 정의 스크롤 막대를 사용하면 기본 스크롤 막대를 제거하는 효과를 얻을 수 있습니다.

이 구성 요소를 사용하는 단계는 다음과 같습니다.

먼저 구성 요소에 uni-list 구성 요소를 도입해야 합니다.

<template>
  <view>
    <uni-list :show-scrollbar="false">
      <uni-list-item>item1</uni-list-item>
      <uni-list-item>item2</uni-list-item>
      <uni-list-item>item3</uni-list-item>
    </uni-list>
  </view>
</template>

<script>
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list/uni-list-item.vue'

export default {
  components: {
    uniList,
    uniListItem
  }
}
</script>

uni-list의 show-scrollbar 속성을 false로 설정하면 기본값을 숨길 수 있습니다. 스크롤 바.

지금까지 uniapp 애플릿에서 기본 스크롤 막대를 제거하는 두 가지 방법을 소개했습니다. 두 방법 모두 스크롤 막대를 제거하는 효과를 얻을 수 있지만 WeChat 클라이언트의 업데이트 메커니즘으로 인해 이러한 방법은 일부 버전에서는 효과적이지 않을 수 있습니다. 애플리케이션에서 스크롤 막대 문제가 발생하면 다양한 버전을 테스트하여 문제를 찾아 그에 따라 처리해야 합니다.

요약하자면, uniapp 애플릿에서 기본 스크롤 막대를 제거하는 방법은 여러 가지가 있으며 다양한 상황과 필요에 따라 적합한 솔루션을 선택할 수 있습니다.

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