微信小程序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 相关文章推荐
JavaScript动态调整TextArea高度的代码
Dec 28 Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
微信小程序实现全国机场索引列表
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中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
vue.js简单配置axios的方法详解
2017/12/13 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
Python写的服务监控程序实例
2015/01/31 Python
python使用自定义user-agent抓取网页的方法
2015/04/15 Python
python中常用的九种预处理方法分享
2016/09/11 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
详解Python正则表达式re模块
2019/03/19 Python
python super的使用方法及实例详解
2019/09/25 Python
Python 列表的清空方式
2020/01/13 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
什么是跨站脚本攻击
2014/12/11 面试题
董事长职责范文
2013/11/08 职场文书
打架检讨书500字
2014/01/29 职场文书
小班重阳节活动方案
2014/02/08 职场文书
环境保护建议书
2014/08/26 职场文书
公司庆典主持词
2015/07/04 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
志愿者工作心得体会
2016/01/15 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python
Golang 并发编程 SingleFlight模式
2022/04/26 Golang
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL