WeChat アプレット開発でサイドバーのスライド効果を実装するためのメソッド コード

サイドバーのスライドは、モバイル アプリケーションの開発において非常に一般的な機能です。もちろん、ミニ プログラムでも例外ではありません。しかし、ミニ プログラムが登場してから間もなく、多くの特殊効果はまだ成熟していないため、ネイティブに書き換えることしかできません。今日はインターネット上で皆さんのためにとても美しいサイドバーの特殊効果を 4 つ集めました ~~
NO1 サイドバーのスライド効果は次のとおりです:

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>

上下のインターフェースを構築する

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を追加します

もう一度クリックしてスタイルを削除します.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 の唯一の違いはスケール値です

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 は、gesture が左から右へであるか、右から左へであるかを決定します

tap_end は、ジェスチャが左から右へであることを示します。左から右へのスライドをトリガーします。

tap_end は、ジェスチャーが右から左への場合、右から左へのスライドをトリガーします。

NO4。 :

この特殊効果は、指を離すと画面幅の 20% 未満の場合は自動的に復元され、画面幅の 20% を超えると に移動します。右のスライディング~~

この効果は非常に複雑なので、複数のステップに分けて分析します~

1) ジェスチャーに合わせて画面が動きます

JSコードは

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

この文が鍵です、とても良いです。理解するには、水色の画面上で js を使用して translationX の値を制御し、ジェスチャが左右にスライドし続け、ジェスチャに合わせて画面がゆっくりとスライドするようにします。

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 中国語 Web サイトの他の関連記事を参照してください。