Methodencode zum Implementieren des Gleiteffekts der Seitenleiste in der WeChat-Applet-Entwicklung-Mini-Programmentwicklung-php.cn

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

高洛峰

Freigeben： 2017-03-17 14:33:35

Original

2702 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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: &#39;transform: translateX(&#39;+(this.data.newmark - this.data.startmark)+&#39;px)&#39;  
})

Nach dem Login kopieren

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!