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 :

est le suivant :

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

.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 :

.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 :

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

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

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

état

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!