WeChat 애플릿 개발 시 스크롤바를 숨기기 위한 스크롤뷰 구현 방법 소개

웹 페이지를 개발할 때 페이지의 아름다움을 위해 스크롤 영역의 기본 스크롤 막대를 제거하는 경우가 많습니다. WeChat 애플릿에서 스크롤 뷰의 숨겨진 스크롤 막대를 구현하는 방법 중 하나:

먼저 스크롤 뷰 속성구성 요소

를 살펴보겠습니다.

세로 스크롤을 사용할 때는 높이를 고정하고 WXSS를 통해 높이를 설정해야 합니다.
몇 가지 간단한 코드 예를 살펴보겠습니다.

<view class="section">
 <view class="sectiontitle">vertical scroll</view>
 <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
 <view id="green" class="scroll-view-item bc_green"></view>
 <view id="red" class="scroll-view-item bc_red"></view>
 <view id="yellow" class="scroll-view-item bc_yellow"></view>
 <view id="blue" class="scroll-view-item bc_blue"></view>
 </scroll-view>
  
 <view class="btn-area">
 <button size="mini" bindtap="tap">click me to scroll into view </button>
 <button size="mini" bindtap="tapMove">click me to scroll</button>
 </view>
</view>
<view class="section section_gap">
 <view class="sectiontitle">horizontal scroll</view>
 <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
 <view id="green" class="scroll-view-item_H bc_green"></view>
 <view id="red" class="scroll-view-item_H bc_red"></view>
 <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
 <view id="blue" class="scroll-view-item_H bc_blue"></view>
 </scroll-view>
</view>

var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
 data: {
 toView: 'red',
 scrollTop: 100
 },
 upper: function(e) {
 console.log(e)
 },
 lower: function(e) {
 console.log(e)
 },
 scroll: function(e) {
 console.log(e)
 },
 tap: function(e) {
 for (var i = 0; i < order.length; ++i) {
  if (order[i] === this.data.toView) {
  this.setData({
   toView: order[i + 1]
  })
  break
  }
 }
 },
 tapMove: function(e) {
 this.setData({
  scrollTop: this.data.scrollTop + 10
 })
 }
})
scroll-view

렌더링은 다음과 같습니다.

참고:
(1) textarea, mao, canvas, video 구성 요소
는 스크롤 보기에서 사용할 수 없습니다. (2) scroll-init- 보기가 우선합니다. 레벨 이 스크롤 상단
보다 높습니다. (3) onPullDownRefresh 이벤트 는 스크롤 보기
에서 트리거될 수 없습니다. (4) 풀다운 새로 고침을 사용하려면, 페이지 스크롤을 사용해야 하며, 스크롤 보기 대신 상단 상태바

를 클릭하여 페이지 상단으로 돌아갈 수도 있습니다.

위 내용은 WeChat 애플릿 개발 시 스크롤바를 숨기기 위한 스크롤뷰 구현 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!