So verwenden Sie die Scroll-View-Komponente, um eine Scroll-Animation im WeChat-Applet zu implementieren-js-Tutorial-php.cn

So verwenden Sie die Scroll-View-Komponente, um eine Scroll-Animation im WeChat-Applet zu implementieren

亚连

Freigeben： 2018-06-08 16:08:42

Original

4435 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Scroll-View-Komponente des WeChat-Applets ausführlich vorgestellt. Sie hat einen gewissen Referenzwert.

Die Beispiele in diesem Artikel werden mit Ihnen geteilt . Die Scroll-View-Komponente implementiert den Scroll-Animationseffekt für die Indexliste. Der spezifische Inhalt ist wie folgt:

Implementierungsprinzip

Verwenden Sie den Scroll-in-View Attribut der Bildlaufansicht.
Verwenden Sie das Bildlauf-mit-Animationsattribut, um eine übermäßige Bildlaufanimation zu erzielen.

WXML

<view class="right-nav">
  <view bindtap="getCurrentCode" class="{{chooseIndex == index ? &#39;.city-list-active&#39; : &#39;&#39;}}" wx:for="{{cityList}}" style="height:{{codeHeight}}px" data-code="{{item.code}}" data-index="{{index}}">
  {{item.code}}
  </view>
</view>

<view class="city-layer {{isShowLayer ? &#39;&#39; : &#39;layer-hide&#39;}}">
 {{codeY}}
</view>

<view class="current-choose-city">当前选择机场：{{chooseCity}}</view>
<scroll-view class="city-scroll" scroll-y="true" scroll-into-view="{{codeY}}" scroll-with-animation="true" style="height:{{cityHeight}}px" bindscroll="scroll">
  <view class="city-box" wx:for="{{cityList}}" wx:key="{{item.code}}">
    <view class="city-code" id="{{item.code}}">{{item.code}}</view>
    <view class="city-list" wx:for="{{item.cityList}}" wx:for-item="city" bindtap="getChooseCity" data-city="{{city}}"> 
       {{city}} 
    </view> 
  </view>
</scroll-view>

Nach dem Login kopieren

WXSS

.current-choose-city{
 position: fixed;
 width: 100%;
 height: 50px;
 line-height: 50px;
 padding: 0 10px;
 top: 0;
 left: 0;
 background-color: #fff;
 z-index: 10;
}
.right-nav{
 width: 30px;
 color: #888;
 text-align: center;
 position: fixed;
 bottom: 0;
 right: 0;
 background-color: rgb(200, 200, 200);
 z-index: 9;
}
.city-scroll{padding-top: 50px;}
.city-code{
 background-color: #f7f7f7;
}
.city-list,.city-code{
 height: 39px;
 line-height: 40px;
 padding: 0 30px 0 10px;
 overflow: hidden;
 border-bottom: 1px solid #c8c7cc;
}
.city-list-active{color:#007aff;}

/*提示点击的字母 */
.city-layer{
 width: 70px;
 height: 70px;
 line-height: 70px;
 text-align: center;
 border-radius: 50%;
 color: #fff;
 background-color: rgba(0, 0, 0, .7);
 position: fixed;
 top: calc(50% - 35px);
 left:calc(50% - 35px);
 z-index: 11;
}
.layer-hide{display: none;}

Nach dem Login kopieren

var city_list = require(&#39;./city.js&#39;);

Page({
 data: {
  cityList: city_list.city,
  chooseCity: &#39;您还未选择机场！&#39;,
  isShowLayer: false,
  chooseIndex: 0,
  codeY: &#39;A&#39;,
  codeHeight: null,
  cityHeight:null
 },
 onLoad (options) {
  var windowHeight = wx.getSystemInfoSync().windowHeight;
  this.setData({ 
   codeHeight: (windowHeight - 50) / this.data.cityList.length,
   cityHeight: windowHeight - 50,
  });
 },
 getCurrentCode(e){
  var self = this;
  this.setData({ 
   codeY: e.target.dataset.code,
   chooseIndex: e.target.dataset.index,
   isShowLayer: true 
  })
  setTimeout(() => {
   self.setData({ isShowLayer: false })
  },500);
 },
 getChooseCity(e){
  this.setData({ chooseCity: e.target.dataset.city });
 }
})

Nach dem Login kopieren

Vergleich

WeChat Mini Program – National Airports Index Liste (MUI-Indexliste)

Zusammenfassung der Vergleichsergebnisse

Da das Scroll-in-View-Attribut von Scroll-View zum angegebenen scrollt id-Position, also fügen Sie das id-Attribut zur Buchstabenzeile der Liste hinzu;
Da das scroll-into-view-Attribut von scroll-view das Scrollen zur angegebenen Position implementiert, ist die Berechnung von scrollTop wird reduziert;
Aufgrund des Scroll-mit-Animations-Attributs der Scroll-Ansicht wird der Scroll-Animationsübergangseffekt erreicht; Reduziert die Schleife zur Berechnung des scrollTop-Verbrauchs;
Die Menge an js-Code wird reduziert und die Variableneinstellung der this.setData-Methode wird reduziert.
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

So implementieren Sie ein Kartenraster mit Baidu Maps

Vergleich und Unterscheidung zwischen Express und Koa2 in NodeJS (ausführliches Tutorial )

Abschlüsse in js (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Scroll-View-Komponente, um eine Scroll-Animation im WeChat-Applet zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!