微信小程序实用组件：联系人右侧拼音导航

原文：

http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1328&extra=page%3D8%26filter%3Dtypeid%26typeid%3D10

wxml

<view class="flex box box-lr"><scroll-view class="flex groups box box-tb" scroll-y="true" scroll-into-view="{{scrollIntoView}}"><block wx:for="{{groups}}" wx:for-item="group"><view class="flex" id="{{group.groupName}}"><view class="group-name">{{group.groupName}}</view><view class="flex group-users"><view wx:for="{{group.users}}" wx:for-item="user" wx:for-index="idx" class="user box box-lr"><view class="user-avatar box box-lr box-pack-center box-align-center"><image class="user-avatar-img" src="{{user.avatar}}"></image></view><view class="flex user-name">{{user.name}}</view></view></view></view></block></scroll-view><view class="nav box box-tb" bindtouchmove="touchmove" bindtouchcancel="touchcancel" bindtouchend="touchend"><view bindtap="tabLetter" data-index="{{item}}" wx:for="{{letters}}" class="flex box box-align-center box-pack-center letter"><text class="letter-text {{selected == item ? 'letter-actived' : ''}}">{{item}}</text></view></view>
</view>

wxss:

page {background-color: #eee;
}
.nav {position: fixed;right: 10rpx;top: 3%;height: 94%;width: 50rpx;font-family: Arial, Helvetica, sans-serif
}
.letter {width: 50rpx;height: 50rpx;font-size: 30rpx;
}
.letter-text {display: inline-block;width: 100%;height: 100%;text-align: center;line-height: 50rpx;border-radius: 50%;
}
.letter-actived {background-color: #ccc;
}
.groups {/*height: 100%;*/
}
.group-name {padding: 10rpx 30rpx;height: 50rpx;line-height: 50rpx;
}
.group-users {background-color: #fff;
}
.user {height: 100rpx;line-height: 100rpx;padding: 0 30rpx;border-bottom: 1px solid #eee;
}
.user-avatar {border-right: 1px solid #eee;width: 100rpx;
}
.user-avatar-img {width: 70rpx;height: 70rpx;border-radius: 50%;
}
.user-name {padding-left: 30rpx;
}

Page({data:{// 当前选择的导航字母selected: 0,// 选择字母视图滚动的位置idscrollIntoView: 'A',// 导航字母letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],groups: [{groupName: 'A',users: [{name: '阿码',avatar: '../../images/avatar.png'}]},{groupName: 'B',users: [{name: '白娘子',avatar: '../../images/avatar.png'},{name: '包天齐',avatar: '../../images/avatar.png'}]},{groupName: 'C',users: [{name: '陈大年',avatar: '../../images/avatar.png'},{name: '丛云山',avatar: '../../images/avatar.png'},{name: '崔鸣贵',avatar: '../../images/avatar.png'}]},{groupName: 'D',users: [{name: '邓牛牛',avatar: '../../images/avatar.png'},{name: '刁仁衣',avatar: '../../images/avatar.png'},{name: '杜长城',avatar: '../../images/avatar.png'}]},{groupName: 'F',users: [{name: '范长龙',avatar: '../../images/avatar.png'},{name: '冯肖晓',avatar: '../../images/avatar.png'}]},{groupName: 'G',users: [{name: '甘地',avatar: '../../images/avatar.png'},{name: '高墙',avatar: '../../images/avatar.png'},{name: '宫都举',avatar: '../../images/avatar.png'}]},{groupName: 'H',users: [{name: '何芸',avatar: '../../images/avatar.png'},{name: '胡坨坨',avatar: '../../images/avatar.png'},{name: '黄坨坨',avatar: '../../images/avatar.png'}]},{groupName: 'T',users: [{name: '谭老头儿',avatar: '../../images/avatar.png'},{name: '汤云西',avatar: '../../images/avatar.png'},{name: '图图',avatar: '../../images/avatar.png'}]},{groupName: 'X',users: [{name: '夏一天',avatar: '../../images/avatar.png'},{name: '鲜轰轰',avatar: '../../images/avatar.png'},{name: '谢大佩',avatar: '../../images/avatar.png'}]}]},onLoad:function(options){const res = wx.getSystemInfoSync(),letters = this.data.letters;// 设备信息this.setData({windowHeight: res.windowHeight,windowWidth: res.windowWidth,pixelRatio: res.pixelRatio});// 第一个字母距离顶部高度，单位使用的是rpx,须除以pixelRatio，才能与touch事件中的数值相加减，css中定义nav高度为94%，所以 *0.94const navHeight = this.data.windowHeight * 0.94, // eachLetterHeight = navHeight / 26,comTop = (this.data.windowHeight - navHeight) / 2, temp = [];this.setData({eachLetterHeight: eachLetterHeight});// 求各字母距离设备左上角所处位置for(let i = 0, len = letters.length; i < len; i++) {const x = this.data.windowWidth - (10 + 50) / this.data.pixelRatio,y = comTop + (i * eachLetterHeight);temp.push([x, y]);}this.setData({lettersPosition: temp})},tabLetter(e) {const index = e.currentTarget.dataset.index;this.setData({selected: index,scrollIntoView: index})this.cleanAcitvedStatus();},// 清除字母选中状态cleanAcitvedStatus() {setTimeout(() => {this.setData({selected: 0})}, 500);},touchmove(e) {const x = e.touches[0].clientX,y = e.touches[0].clientY,lettersPosition = this.data.lettersPosition,eachLetterHeight = this.data.eachLetterHeight,letters = this.data.letters;console.log(y);// 判断触摸点是否在字母导航栏上if(x >= lettersPosition[0][0]) {for(let i = 0, len = lettersPosition.length; i < len; i++) {// 判断落在哪个字母区域，取出对应字母所在数组的索引，根据索引更新selected及scroll-into-view的值const _y = lettersPosition[i][1], // 单个字母所处高度__y = _y + eachLetterHeight; // 单个字母最大高度取值范围， 50为字母高50rpxif(y >= _y && y <= __y) {this.setData({selected: letters[i],scrollIntoView: letters[i]});break;}}}},touchend(e) {this.cleanAcitvedStatus();}
})

微信小程序实用组件：联系人右侧拼音导航相关推荐

微信小程序image组件开发程序以及相关图片问题参考资料汇总
微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...
api 微信小程序组件库colorui_2020最全微信小程序UI组件库合集
概述 " 这可能是2020年最全的UI组件集合了,希望对你有帮助,如果觉得好,别忘了给小编给点点赞鼓励! 微信小程序实用UI组件库合集第一款官方WeUI组件库 " 地址: ht ...
微信小程序UI组件的推荐以及使用
小编今天写一个微信小程序的界面,之前都是使用原声的编写页面,按照设计图编写.但是这次是编写一个微信小程序的时间选择器,让小编我自由发挥,没有设计稿(复杂的设计稿小编也是写不出来的,比如好看实用的时间选 ...
小程序子组件向父组件传值_一套组件化、可复用、易扩展的微信小程序 UI 组件库...
如何使用 Wux Weapp 是一套组件化.可复用.易扩展的微信小程序 UI 组件库.在开始使用之前,需要先阅读微信小程序自定义组件的相关文档. 通过 npm 安装,需要依赖小程序基础库 2.2.1 ...
微信小程序自定义组件方案
前言:小程序已于11月初开放了小程序组件功能,但事件方面还不是很完善,有的组件暂时可能还是要用其他方式来实现,这里简单记录下开发小程序自定义组件的要点. 在小程序官方开发组件开发功能之前,自定义组件的 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否主要属性: wxml 显 ...
手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...

微信小程序实用组件：联系人右侧拼音导航

微信小程序实用组件：联系人右侧拼音导航相关推荐

最新文章

热门文章