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

亚连
Release: 2018-06-08 16:08:42
Original
4345 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

  {{item.code}}    {{codeY}}  当前选择机场:{{chooseCity}}   {{item.code}}  {{city}}   
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

JS

var city_list = require('./city.js'); Page({ data: { cityList: city_list.city, chooseCity: '您还未选择机场!', isShowLayer: false, chooseIndex: 0, codeY: 'A', 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.

Related articles:

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!