未加星标

微信小程序scroll-view组件实现滚动动画

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏
本文实例为大家分享了scroll-view组件实现索引列表滚动动画效果,供大家参考,具体内容如下

效果图

实现原理

利用scroll-view的scroll-into-view属性进行定位;
利用scroll-view的scroll-with-animation属性实现滚动动画过度。

WXML

<view class="right-nav">
<view bindtap="getCurrentCode" class="{{chooseIndex == index ? '.city-list-active' : ''}}" wx:for="{{cityList}}" style="height:{{codeHeight}}px" data-code="{{item.code}}" data-index="{{index}}">
{{item.code}}
</view>
</view>
<view class="city-layer {{isShowLayer ? '' : 'layer-hide'}}">
{{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>

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

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

对比

微信小程序―-全国机场索引列表(MUI索引列表)

对比结果总结

由于scroll-view的scroll-into-view属性是滚动到指定id位置,所以,在列表的字母行加上id属性;
由于scroll-view的scroll-into-view属性实现了滚动到指定位置,所以减少了scrollTop的计算;
由于scroll-view的scroll-with-animation属性,实现了滚动动画过度效果;
减少了计算scrollTop的循环消耗;
js代码量减少,减少this.setData方法的变量设置。

DEMO下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


您可能感兴趣的文章:微信小程序实现滚动消息通知微信小程序顶部可滚动导航效果微信小程序滚动Tab实现左右可滑动切换微信小程序-滚动消息通知的实例代码微信小程序-横向滑动scroll-view隐藏滚动条微信小程序scroll-view实现横向滚动和上拉加载示例微信小程序 滚动选择器(时间日期)详解及实例代码微信小程序 bnner滚动实例详解微信小程序 scroll-view隐藏滚动条详解微信小程序数字滚动插件使用详解

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 微信XML定位变量
tags: view,scroll,city,gt,lt,微信,code,滚动,class,height,index,color,list
分页:12
转载请注明
本文标题:微信小程序scroll-view组件实现滚动动画
本站链接:https://www.codesec.net/view/572235.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(93)