WeChat 애플릿 개발 시 사이드바의 슬라이딩 효과를 구현하기 위한 메소드 코드

사이드바 슬라이딩은 모바일 애플리케이션 개발에서 매우 일반적인 기능입니다. 물론 미니 프로그램에서도 예외는 아닙니다. 그러나 미니 프로그램이 나온 지 얼마 지나지 않아 많은 특수 효과가 아직 성숙되지 않았으며 오직 가능합니다. 그래서 오늘은 인터넷상의 모든 사람들을 위한 아주 아름다운 사이드바 특수 효과 4개를 모아봤습니다~~
NO1. 사이드바의 슬라이딩 효과는 다음과 같습니다:

where wxml 코드는 다음과 같습니다.

<!--page/one/index.wxml-->  
<view class="page"> 
    <view class="page-bottom"> 
        <view class="page-content"> 
            <view  class="wc"> 
                <text>第一个item1</text> 
            </view> 
            <view  class="wc"> 
                <text>第二个item2</text> 
            </view> 
            <view  class="wc"> 
                <text>第三个item3</text> 
            </view> 
            <view  class="wc"> 
                <text>第四个item4</text> 
            </view> 
        </view> 
    </view> 
    <view class="page-top {{open ? &#39;c-state1&#39; : &#39;&#39;}}"> 
        <image bindtap="tap_ch" src="../../images/btn.png"></image> 
    </view> 
</view>

상하 2계층 인터페이스 구축

css3 오른쪽 쉬프트 작성애니메이션style.c-state1

wxss

.c-state1{ 
  transform: rotate(0deg) scale(1) translate(75%,0%);   
  -webkit-transform: rotate(0deg) scale(1) translate(75%,0%);   
}

style.c-state1을 추가하려면 버튼을 클릭하세요

style.c-state1을 다시 클릭하면

NO2가 제거됩니다. 사이드바의 슬라이딩 효과는 다음과 같습니다. (특징:

슬라이드되고 화면이 축소됩니다

)

wxss의 코드는 다음과 같습니다.

.c-state2{ 
  transform: rotate(0deg) scale(.8) translate(75%,0%);   
  -webkit-transform: rotate(0deg) scale(.8) translate(75%,0%);   
}

wxml 코드는 특수효과와 동일합니다

.c-state2와 .c-state1의 유일한 차이점은 scale 값입니다

js 코드:

<font face="&quot"><font style="font-size:15px">Page({ 
  data:{ 
    open : false 
  }, 
  tap_ch: function(e){ 
    if(this.data.open){ 
      this.setData({ 
        open : false 
      });  
    }else{ 
      this.setData({ 
        open : true 
      });  
    } 
  } 
})  </font></font>

코드는 매우 간단합니다. 뷰의 클래스 선택을 제어하는 ​​것입니다. 오픈 값을 통해

NO3. 사이드바의 슬라이딩 효과는 다음과 같습니다. (특징: 버튼을 클릭하여 측면 슬라이딩을 실행할 수 있을 뿐만 아니라 메인 인터페이스를 드래그하여 실행할 수도 있습니다. 측면 슬라이딩 효과)

.js 코드는 다음과 같습니다.

tap_start:function(e){ 
    // touchstart事件  
    this.data.mark = this.data.newmark = e.touches[0].pageX;  
}, 
tap_drag: function(e){ 
    // touchmove事件  
   
    /*
     * 手指从左向右移动 
     * @newmark是指移动的最新点的x轴坐标 ， @mark是指原点x轴坐标 
     */ 
    this.data.newmark = e.touches[0].pageX;  
    if(this.data.mark < this.data.newmark){ 
      this.istoright = true;  
    } 
    /*
     * 手指从右向左移动 
     * @newmark是指移动的最新点的x轴坐标 ， @mark是指原点x轴坐标 
     */ 
    if(this.data.mark > this.data.newmark){ 
      this.istoright = false;  
   
    } 
    this.data.mark = this.data.newmark;  
}, 
tap_end: function(e){ 
    // touchend事件  
    this.data.mark = 0;  
    this.data.newmark = 0;  
    if(this.istoright){ 
      this.setData({ 
        open : true 
      });  
    }else{ 
      this.setData({ 
        open : false 
      });  
    } 
}

tap_drag의 판사제스처는 왼쪽에서 오른쪽으로, 또는 오른쪽에서 왼쪽으로

tap_end는 제스처가 왼쪽에서 오른쪽으로 올라가는 것을 의미합니다.

tap_end는 제스처가 올라가는 것을 의미합니다.

NO4 사이드바의 슬라이딩 효과는 다음과 같습니다.

이 특수 효과는 슬라이드 동작으로 슬라이드하세요. 놓았을 때 화면 너비의 20% 미만이면 자동으로 복원되고, 놓았을 때 20%를 초과하면 오른쪽으로 슬라이드됩니다~~

이거 효과가 굉장히 복잡해서 여러 단계로 나눠서 분석해봤습니다~

1) 제스처에 따라 화면이 움직입니다

. JS 코드는

this.setData({ 
    translate: 'transform: translateX('+(this.data.newmark - this.data.startmark)+'px)'  
})

입니다. 문장이 핵심이고, js를 사용하여 연한 파란색 화면에서 TranslateX의 값을 제어하여 제스처가 좌우로 계속 미끄러지고 화면도 제스처에 따라 천천히 미끄러지도록 하는 것입니다.

2) 바운스 효과

화면을 화면 너비의 20% 미만으로 드래그하여 기본 상태로 복원 20%를 초과하는 경우 오른쪽으로 슬라이드하세요. ~~

JS 코드:

if(x < 20%){ 
     this.setData({ 
         translate: &#39;transform: translateX(0px)&#39;  
     }) 
}else{ 
     this.setData({ 
         translate: &#39;transform: translateX(&#39;+this.data.windowWidth*0.75+&#39;px)&#39;  
     }) 
}

20% 미만이면translateX(0px)로 화면을 복원하고, 20%보다 크면 tanslateX(75%)를 사용하고 화면이 화면의 75%까지 오른쪽으로 이동합니다.

위 내용은 WeChat 애플릿 개발 시 사이드바의 슬라이딩 효과를 구현하기 위한 메소드 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!