微信小程序 实现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
});
},
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
本文向大家介绍微信小程序实现手势滑动效果,包括了微信小程序实现手势滑动效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了微信小程序实现手势滑动的具体代码,供大家参考,具体内容如下 wxml: index.js: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍微信小程序 按钮滑动的实现方法,包括了微信小程序 按钮滑动的实现方法的使用技巧和注意事项,需要的朋友参考一下 微信小程序 按钮滑动的实现方法 一.先看东西 滑动前 滑动后 二.再上代码 index.wxml index.wxss index.js 三.顺便说说 1.按钮滑动事件 bindtouchstart //按钮开始滑动 bindtouchend //按钮结束滑动 bindtou
本文向大家介绍微信小程序实现签字功能,包括了微信小程序实现签字功能的使用技巧和注意事项,需要的朋友参考一下 效果展示 准备工作 1.canvas的使用 主要用到了 bindtouchstart , bindtouchmove 两个属性,捕捉手指移动的同时,将移动前的坐标和移动后的坐标用canvas的画图api绘制出来 2.wx.createCanvasContext 这个api用于创建并获取指
本文向大家介绍微信小程序 scroll-view实现锚点滑动的示例,包括了微信小程序 scroll-view实现锚点滑动的示例的使用技巧和注意事项,需要的朋友参考一下 前言 最近开始做小程序,通读一遍文档再上手并不算难,但不得不说小程序里还是有一些坑。这里说一下如何实现页面锚点跳转,一个城市列表的效果示意图如下: 因为在微信小程序的环境中不能想在浏览器里设置标签,或者操作dom滚动,传统做法就行不
本文向大家介绍10行代码实现微信小程序滑动tab切换,包括了10行代码实现微信小程序滑动tab切换的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了微信小程序滑动tab切换展示的具体代码,供大家参考,具体内容如下 效果预览: js部分: wxtml部分: wxss部分: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍微信小程序 向左滑动删除功能的实现,包括了微信小程序 向左滑动删除功能的实现的使用技巧和注意事项,需要的朋友参考一下 微信小程序 向左滑动删除功能的实现 实现效果图: 实现代码: 1、wxml touch-item元素绑定了bindtouchstart、bindtouchmove事件 2、wxss flex布局、css3动画 3、js 注释很详细 感谢阅读,希望能帮助到大家,谢谢大家