微信小程序 实现listview带字母滑动
时间:2019-03-30
本文章向大家介绍微信小程序 实现listview带字母滑动,主要包括微信小程序 实现listview带字母滑动使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
微信小程序 实现listview带字母滑动
wxml
<!--字母滑动--> <view class="letter-position" wx:if="{{filterType == 'name'}}" hidden="{{letterShow?'true':''}}" style="z-index:{{Zindex}}" catchtouchstart="handlerAlphaTap" catchtouchmove="handlerMove" catchtouchend="handlerEnd"> <image class="no-stars star-icon" data-loc="star" src="../img/no-stars.png"></image> <text class="letter" wx:for="{{groups}}" wx:for-item="group" data-loc="{{group.id}}" wx:key="L_{{group.id}}"> {{group.id}} </text> <text class="letter no-letter"> # </text> </view>
<scroll-view scroll-into-view="{{locationTo}}" bindscrolltolower="onscrollLower" scroll-y="{{trues}}" style="height: {{clientHeihgt?clientHeihgt+'px':'auto'}}" bindscroll="scroll" scroll-top="{{scrollTop}}" hidden="{{favoriteCards.length==0 && starCards.length ==0}}">
js
handlerAlphaTap(e) { var ap = e.target.dataset.loc; //字母 this.setData({ locationTo: ap }); var list = this.data.groups; this.offsetTop = (this.data.clientHeihgt - list.length * 16) / 2; }, handlerMove(e) { var _this = this; var list = this.data.groups; var moveY = e.touches[0].clientY; var rY = moveY - this.offsetTop; if (rY >= 0) { var index = Math.ceil((rY - 16) / 16); if (0 <= index && index < list.length) { _this.setData({ locationTo: list[index].id, nonwApID: list[index].id, fly: false, //nonwAp: list[index] }); // _this.setData({ // nonwApID:_this.data.nonwAp.id // }); } } }, handlerEnd(e) { // try{ this.setData({ nonwApID: '', fly: true, // locationTo:this.data.nonwAp.id }); // }catch(e){ // } var _this = this; this.setData({ scoTTTTp: e.currentTarget.dataset.scrollTop }); },
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【打包构建】Mac下使用expect实现执行sudo命令时自动输入密码
- ASP.NET Core 奇淫技巧之SPA部署
- SAP Cloud for Customer Rule Editor的使用方法和底层工作原理
- (数据科学学习手札94)QGIS+Conda+jupyter玩转Python GIS
- 72-STM32+ESP8266+AIR202基本控制篇-移植使用-移植Android的MQTT包到自己的工程项目
- 用上Latex实现编辑伪代码
- TensorFlow交叉熵函数(cross_entropy)·理解
- 第05期:Prometheus 数据查询(一)
- 技术分享 | MySQL 复制那点事 - Seconds_behind_Master 参数调查笔记
- 线程有多少种状态?Runnable 一定在执行任务吗?
- swift 中类(class)和结构体(struct)区别
- C语言三剑客之《C专家编程》一书精华提炼
- 前端必备技能:json-server全攻略
- 温故知新——Spring AOP(二)
- R语言中的偏最小二乘PLS回归算法