How to use scroll-view component to implement scrolling animation in WeChat applet-JS Tutorial-php.cn

How to use scroll-view component to implement scrolling animation in WeChat applet

亚连

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

Original

4368 people have browsed it

This article mainly introduces the scroll-view component of the WeChat applet in detail to implement scrolling animation. It has a certain reference value. Interested friends can refer to it.

The examples in this article are shared with you. The scroll-view component implements the index list scrolling animation effect for your reference. The specific content is as follows

Implementation principle

Use the scroll-into-view attribute of scroll-view Positioning;
Use the scroll-with-animation attribute of scroll-view to achieve excessive scrolling animation.

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>

Copy after login

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

Copy after login

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

Copy after login

Comparison

WeChat Mini Program—National Airports Index list (MUI index list)

Summary of comparison results

Since the scroll-into-view attribute of scroll-view scrolls to the specified id position, so add the id attribute to the letter row of the list;
Since the scroll-into-view attribute of scroll-view realizes scrolling to the specified position, the calculation of scrollTop is reduced. ;
Due to the scroll-with-animation attribute of scroll-view, the scroll animation transition effect is achieved;
Reduces the cycle of calculating scrollTop Consumption;
#The amount of js code is reduced, and the variable setting of this.setData method is reduced.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to implement map grid using Baidu Maps

Comparison and distinction between Express and Koa2 in nodejs (detailed tutorial)

Closures in js (detailed tutorial)

The above is the detailed content of How to use scroll-view component to implement scrolling animation in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!