Code de méthode pour implémenter l'effet coulissant de la barre latérale dans le développement d'applets WeChat

Le glissement de la barre latérale est une fonction très courante dans le développement d'applications mobiles. Bien sûr, cela ne fait pas exception dans les mini-programmes. Cependant, peu de temps après la sortie des mini-programmes, de nombreux effets spéciaux n'ont pas encore atteint leur maturité et ne peuvent être utilisés que. réécrit nativement. Nous avons donc rassemblé aujourd'hui quatre très beaux effets spéciaux de barre latérale pour tout le monde sur Internet~~
NO1 L'effet coulissant de la barre latérale est le suivant :

où wxml

est le suivant :

Construire une interface à deux couches supérieure et inférieure

<!--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>

Écrire une animation CSS3 à droite

style.c-state1

wxss

Cliquez sur le bouton

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

pour ajouter le style.c-state1 Cliquez à nouveau pour supprimer le style .c-state1

NO2 L'effet coulissant de la barre latérale est le suivant : (Caractéristiques :

les diapositives et l'écran. rétrécit

)

Le code de wxss est le suivant :

Le code wxml est le même que l'effet spécial un

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

La seule différence entre .c-state2 et .c-state1 est la valeur de l'échelle

Code js :

Le code est très simple , il s'agit de contrôler la sélection des classes dans la vue via la valeur d'ouverture

<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. Le glissement de la barre latérale Le rendu est le suivant : (Caractéristiques : Vous pouvez non seulement cliquer sur le bouton pour déclencher le glissement latéral. , mais vous pouvez également faire glisser l'interface principale pour déclencher des effets de glissement secondaires)

. Le code .js est le suivant :

tap_drag détermine si le

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 
      });  
    } 
}

le geste

se fait de gauche à droite, ou de droite à gauche tap_end indique que le geste est relevé Si c'est de gauche à droite, déclenchez de gauche Glissement vers la droite

tap_end indique que le geste est relevé. Si c'est de droite à gauche, un glissement de droite à gauche se déclenche

NO4. L'effet de glissement de la barre latérale est le suivant :

Cet effet spécial glissera avec le geste de glissement ; s'il est inférieur à 20% de la largeur de l'écran au lâcher, il se rétablira automatiquement s'il dépasse 20% de la largeur de l'écran, il se déplacera vers la droite Coulissant~~

Cet effet est très complexe, nous le divisons en plusieurs étapes pour l'analyser~

1) L'écran bouge avec le geste

.JS Le code est

Cette phrase est la clé et facile à comprendre. Elle utilise js pour contrôler la valeur de translateX sur l'écran bleu clair, afin que le geste continue de glisser vers la gauche et la droite, et l'écran glisse lentement avec le geste.

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

2) Effet de rebond

Faites glisser l'écran sur moins de 20 % de la largeur de l'écran et restaurez l'

état

par défaut s'il dépasse 20%, faites glisser vers l'extrême droite ; ~~

Code JS :

S'il est inférieur à 20%, laissez traduireX(0px) restaurer l'écran ; s'il est supérieur à 20%, laissez tanslateX(75% ; ) et l'écran se déplacera jusqu'à 75 % de l'écran.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!