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


Posted in Javascript onJanuary 31, 2018

本文实例为大家分享了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 });
 }
})

对比

对比结果总结

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

DEMO下载

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

Javascript 相关文章推荐
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
Select下拉框模糊查询功能实现代码
Jul 22 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
Javascript的this详解
Mar 23 Javascript
重学JS 系列:聊聊继承(推荐)
Apr 11 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
微信小程序实现全国机场索引列表
Jan 31 #Javascript
微信小程序radio组件使用详解
Jan 31 #Javascript
微信小程序checkbox组件使用详解
Jan 31 #Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 #Javascript
浅析Angular19 自定义表单控件
Jan 31 #Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 #Javascript
微信小程序switch开关选择器使用详解
Jan 31 #Javascript
You might like
迅速确定php多维数组的深度的方法
2014/01/07 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
js data日期初始化的5种方法
2013/12/29 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
js实现查询商品案例
2020/07/22 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
pygame加载中文名mp3文件出现error
2017/03/31 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
详解用python生成随机数的几种方法
2019/08/04 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
Python 创建TCP服务器的方法
2020/07/28 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
护士求职推荐信范文
2013/11/23 职场文书
硕士研究生自我鉴定范文
2013/12/27 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
数控技校生自我鉴定
2014/03/02 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
单位单身证明样本
2014/10/11 职场文书
新学期新寄语,献给新生们!
2019/11/15 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
详解在OpenCV中如何使用图像像素
2022/03/03 Python