Uniapp에서 왼쪽, 오른쪽 클릭 스크롤 기능을 구현하는 방법

uniapp은 Vue.js 기반의 크로스 플랫폼 애플리케이션 프레임워크로, iOS, Android, H5, 미니 프로그램 등 여러 플랫폼용 애플리케이션을 동시에 개발할 수 있습니다. 그 중 스크롤 작업은 유니앱에서 매우 일반적인 작업입니다. 오늘은 유니앱에서 왼쪽 및 오른쪽 클릭 스크롤을 구현하는 방법에 대해 설명하겠습니다.

1. 배경 소개

실제 유니앱을 적용하다 보면 페이지에 좌우 스크롤 동작을 구현해야 하는 경우가 종종 있습니다. 예를 들어 모바일 탐색 메뉴나 수평 이미지 스크롤의 경우 스크롤하려면 왼쪽 및 오른쪽 클릭이 필요합니다. 그렇다면 Uniapp에서 왼쪽 및 오른쪽 클릭 스크롤 효과를 어떻게 얻을 수 있을까요? 다음으로 이 질문에 답하기 위해 자세한 단계를 사용하겠습니다.

2. 구현 단계

1. HBuilderX에서 uniapp 프로젝트를 생성하고, Pages/index/index.vue를 열고, 다음 코드를 추가합니다.

<template>
  <view class="container">
    <view class="scroll-view">
      <view class="scroll-item">1</view>
      <view class="scroll-item">2</view>
      <view class="scroll-item">3</view>
      <view class="scroll-item">4</view>
      <view class="scroll-item">5</view>
      <<view class="scroll-item">6</view>
    </view>
  </view>
</template>

<style>
.container{
  height:300px;
  overflow:hidden;
}
.scroll-view{
  display:flex;
  width:max-content;
  height:100%;
  transition:transform 0.5s ease;
}
.scroll-item{
  width:100px;
  height:300px;
  background-color:#eee;
  margin-right:10px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:30px;
}
</style>

2 스타일에서는 flex 레이아웃을 사용하고 너비를 다음과 같이 설정합니다. 콘텐츠 너비에 적응할 수 있는 max-content. 동시에 컨테이너 스타일에 Overflow:hidden을 사용하여 컨테이너 높이를 제한하고 컨테이너 너머의 콘텐츠를 숨깁니다.

3. 왼쪽 및 오른쪽 스크롤 효과를 얻으려면 전환 속성을 사용하고 스크롤 효과를 얻기 위해 변환 속성의 값을 변경해야 합니다. 여기서는 왼쪽 및 오른쪽 클릭 스크롤 효과를 얻기 위해 버튼을 클릭하여 스크롤 뷰의 변환 값을 변경합니다.

4 버튼을 클릭하는 효과를 얻으려면 현재 위치를 나타내는 데이터의 현재 값을 정의한 다음 현재 위치의 값을 변경하여 스크롤 뷰의 변환 값을 동적으로 변경해야 합니다. 방법.

<script>
export default {
  data(){
    return{
      current:0
    }
  },
  methods:{
    slideLeft(){
      if(this.current > 0){
        this.current = this.current - 1;
      }
    },
    slideRight(){
      if(this.current < 5){
        this.current = this.current + 1;
      }
    }
  },
  watch:{
    current:function(){
      this.$nextTick(()=>{
        this.$refs.scrollView.style.transform = "translateX(" + (-110 * this.current) + "px)";
      });
    }
  }
}
</script>

여기에서는 watch 속성을 사용하여 현재의 변경 사항을 모니터링한 다음 $nextTick 메서드를 사용하여 특정 작업을 수행하기 전에 DOM 요소가 렌더링되었는지 확인합니다. 이 메서드에서는 왼쪽과 오른쪽으로 슬라이딩하는 효과를 얻기 위해 SlideLeft와 SlideRight라는 두 가지 메서드를 정의합니다. 슬라이딩 효과를 구현할 때 TranslateX를 사용하여 스크롤 뷰의 위치를 ​​제어합니다.

5. 마지막으로 사용자가 클릭하여 슬라이딩 효과를 얻을 수 있도록 페이지에 왼쪽 및 오른쪽 슬라이딩 버튼을 추가해야 합니다. 페이지에 다음 코드를 추가합니다.

<view class="control-panel">
  <button @click="slideLeft">left</button>
  <button @click="slideRight">right</button>
</view>

여기에서는 @click을 사용하여 버튼의 클릭 이벤트를 바인딩하고 메서드에서 SlideLeft 및 SlideRight 메서드를 호출하여 왼쪽 및 오른쪽 클릭과 슬라이드 효과를 얻습니다.

3. 요약

위 단계를 통해 유니앱에서 왼쪽, 오른쪽 클릭과 슬라이드 효과를 얻을 수 있습니다. 실제 응용 분야에서는 특정 요구 사항에 따라 슬라이딩 효과를 최적화하고 확장할 수도 있습니다. 간단한 예를 들어보겠습니다. 초보자에게 도움이 되기를 바랍니다.

위 내용은 Uniapp에서 왼쪽, 오른쪽 클릭 스크롤 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!