WeChat アプレット開発でサイドバーのスライド効果を実装するためのメソッドコード-ミニプログラム開発-php.cn

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

高洛峰

リリース： 2017-03-17 14:33:35

オリジナル

2701 人が閲覧しました

サイドバーのスライドは、モバイルアプリケーションの開発において非常に一般的な機能です。もちろん、ミニプログラムでも例外ではありません。しかし、ミニプログラムが登場してから間もなく、多くの特殊効果はまだ成熟していないため、ネイティブに書き換えることしかできません。今日はインターネット上で皆さんのためにとても美しいサイドバーの特殊効果を 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: &#39;transform: translateX(&#39;+(this.data.newmark - this.data.startmark)+&#39;px)&#39;  
})

ログイン後にコピー

この文が鍵です、とても良いです。理解するには、水色の画面上で 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 サイトの他の関連記事を参照してください。