Methodencode zum Implementieren des Gleiteffekts der Seitenleiste in der WeChat-Applet-Entwicklung

Sidebar-Sliding ist eine sehr häufige Funktion bei der Entwicklung mobiler Anwendungen. Natürlich ist dies bei Miniprogrammen keine Ausnahme. Allerdings sind viele Spezialeffekte noch nicht lange nach der Veröffentlichung ausgereift Also nativ neu geschrieben. Heute haben wir vier sehr schöne Seitenleisten-Spezialeffekte für alle im Internet zusammengestellt >wo wxml
lautet wie folgt:

Erstellen Sie eine obere und untere zweischichtige Schnittstelle

Schreiben Sie eine CSS3-RechtsverschiebungAnimation style.c-state1

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

wxss

Klicken Sie auf die Schaltfläche

, um style.c-state1 hinzuzufügen Klicken Sie erneut, um den Stil .c-state1 zu entfernen

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

NO2. Der Gleiteffekt der Seitenleiste ist wie folgt: (Funktionen: Folien und der Bildschirm schrumpft

)

Der Code von wxss lautet wie folgt:

Der WXML-Code ist derselbe wie der Spezialeffekt eins

Der einzige Unterschied zwischen .c-state2 und .c-state1 ist der Skalierungswert

js-Code:

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

Der Code ist sehr einfach Es dient dazu, die Klassenauswahl der Ansicht über den offenen Wert zu steuern , aber Sie können auch die Hauptoberfläche ziehen, um seitliche Gleiteffekte auszulösen)

.js-Code lautet wie folgt:

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

tap_drag bestimmt, ob die

Geste

ist von links nach rechts oder von rechts nach links

tap_end zeigt an, dass die Geste von links nach rechts erfolgt, Auslösen von links Nach rechts gleiten

tap_end zeigt an, dass die Geste von rechts nach links ausgeführt wird.

NO4 Der Schiebeeffekt der Seitenleiste ist wie folgt:

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

Dieser Spezialeffekt wird mit der Schiebegeste verschoben; wenn er beim Loslassen weniger als 20 % der Bildschirmbreite beträgt, wird er automatisch wiederhergestellt, wenn er 20 % der Bildschirmbreite überschreitet. es bewegt sich nach rechts. Gleiten~~

Dieser Effekt ist sehr komplex, wir teilen ihn zur Analyse in mehrere Schritte auf~

1) Der Bildschirm bewegt sich mit der Geste

.JS Der Code ist

Dieser Satz ist der Schlüssel und leicht zu verstehen. Er verwendet js, um den Wert von TranslateX auf dem hellblauen Bildschirm zu steuern, sodass die Geste weiterhin nach links und rechts gleitet. und der Bildschirm gleitet langsam mit der Geste.

2) Bounce-Effekt

Ziehen Sie den Bildschirm um weniger als 20 % der Bildschirmbreite und stellen Sie den Standardstatus

wieder her

; wenn er 20 % überschreitet, schieben Sie ihn ganz nach rechts ~~

JS-Code:

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

Wenn es weniger als 20 % beträgt, lassen Sie translatorX(0px) den Bildschirm wiederherstellen, wenn es größer als 20 % ist, lassen Sie tanslateX(75 % ) und der Bildschirm bewegt sich nach rechts auf 75 % des Bildschirms.

Das obige ist der detaillierte Inhalt vonMethodencode zum Implementieren des Gleiteffekts der Seitenleiste in der WeChat-Applet-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!