The WeChat applet scroll-view component implements rolling animation and the applet scroll-view

The small program scroll-view component implements rolling animation, and the small program scroll-view

The scroll-view component is used to implement the index list scrolling animation for your reference. The details are as follows:

Implementation Principle

Use the scroll-into-view attribute of scroll-view to locate the problem;
Use scroll-view's scroll-with-animation attribute to overwrite the scrolling animation.

WXML

<View class = "right-nav"> <view bindtap = "getCurrentCode" class = "{chooseIndex = index? '. City-list-activity': ''}" wx: for = "{cityList}" style = "height: {codeHeight} px "data-code =" {item. code }}" data-index = "{index}" >{{ item. code }}</view> <view class = "city-layer {isShowLayer? '': 'Layer-hide '}}" >{{ codeY }}</view> <view class =" current-choose-city "> currently selected airport: {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> </scroll -view>

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;}/* letter prompted to be clicked */. 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 ;}

JS

Var city_list = require ('./city. js'); Page ({data: {cityList: city_list.city, chooseCity:' You have not selected an airport! ', IsShowLayer: false, chooseIndex: 0, codeY: 'A', codeHeight: null, cityHeight: null}, onLoad (options) {var transport wheight = wx. getSystemInfoSync (). optional wheight; this. setData ({codeHeight: (optional wheight-50)/this. data. cityList. length, cityHeight: Running wheight-50,}) ;}, getCurrentCode (e) {var self = this; this. setData ({codeY: e.tar get. dataset. code, chooseIndex: e.tar get. dataset. index, isShowLayer: true}) setTimeout () => {self. setData ({isShowLayer: false})}, 500) ;}, getChooseCity (e) {this. setData ({chooseCity: e.tar get. dataset. city });}})

Comparison

Mini-app-nationwide airport index list (MUI index List)

Comparison result summary

• Because the scroll-into-view attribute of scroll-view is scrolled to the specified id location, the id attribute is added to the letter line in the list;
• Because the scroll-into-view attribute of scroll-view can scroll to the specified position, scrollTop computing is reduced;
• Due to the scroll-with-animation attribute of scroll-view, the scrolling animation is over-effective;
• Reduces the consumption of scrollTop;
• Reduce the js Code volume and reduce the variable settings of this. setData method.

Download DEMO

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.