[table]
[tr][td]我们经常在手机App中看到右面带字母定位的列表，一般出现在手机联系人界面。效果如图所示
微信小程序字母列表导航条
[b]9-7.png[/b] [i](55.37 KB, 下载次数: 1)[/i]
下载附件 [url=" url=]保存到相册[/url]
[align=left]2017-5-2 15:45 上传[/align]
我们也可以在小程序中实现图示这样的效果。创建alphabetical.js,alphabetical.wxml,alphabetical.wxss. 先来看看alphabetical.wxml相关的代码:
[list=1]
[*]<scroll-view scroll-y style="height: {{windowHeight}}" scroll-into-view="{{alpha}}">
[*] <view class="alphabet">
[*] <view class="alphabet-list">
[*] <view wx:for="{{list}}" wx:key="unique" id="{{item.alphabet}}" class="section-item" wx:if="{{index!=0}}">
[*] <view class="section-item-header">
[*] {{item.alphabet}}
[*] </view>
[*] <view wx:for="{{item.datas}}" wx:key="unique" wx:for-item="cell" wx:for-index="cellIndex" class="section-item-cells">
[*] <view class="section-item-cell {{cellIndex != (item.datas.length-1) ? 'border-bottom':''}}">
[*] <text>{{cell}}</text>
[*] </view>
[*] </view>
[*] </view>
[*] </view>
[*] </view>
[*]</scroll-view>
[*]<view data-id="selector" catchtouchstart="handlerAlphaTap" catchtouchmove="handlerMove" class="alphanet-selector">
[*] <view data-ap="{{item.alphabet}}" wx:for="{{list}}" wx:key="unique" class="selector-one">
[*] {{item.alphabet}}
[*] </view>
[*]</view>
[/list]
[i]复制代码[/i]
列表使用scroll-view实现，字母列表用view组件for循环实现。里面用到一些数据需要alphabetical.js提供。 来看下alphabetical.js代码:
[list=1]
[*]Page({
[*] data:{
[*] list: [
[*] {alphabet: 'Top', datas: ['asome','aentries','are here']},
[*] {alphabet: 'A', datas: ['asome','aentries','are here']},
[*] {alphabet: 'B', datas: ['bbsome','bebntries','bare here']},
[*] {alphabet: 'C', datas: ['csome','centries','care here']},
[*] {alphabet: 'D', datas: ['dsome','dentries','dare here']},
[*] {alphabet: 'E', datas: ['esome','eentries','eare here']},
[*] {alphabet: 'F', datas: ['fsome','fentries','are here']},
[*] {alphabet: 'G', datas: ['gsome','gentries','gare here']},
[*] {alphabet: 'H', datas: ['hsome','hentries','hare here']},
[*] {alphabet: 'I', datas: ['isome','ientries','iare here']},
[*] {alphabet: 'J', datas: ['jsome','jentries','jare here']},
[*] {alphabet: 'K', datas: ['ksome','kentries','kare here']},
[*] {alphabet: 'L', datas: ['lsome','lentries','lare here']},
[*] {alphabet: 'M', datas: ['msome','mentries','mare here']},
[*] {alphabet: 'N', datas: ['nsome','nentries','nare here']},
[*] {alphabet: 'O', datas: ['osome','oentries','oare here']},
[*] {alphabet: 'P', datas: ['psome','pentries','pare here']},
[*] {alphabet: 'Q', datas: ['qsome','qentries','qare here']},
[*] {alphabet: 'R', datas: ['rsome','rentries','rare here']},
[*] {alphabet: 'S', datas: ['some','sentries','sare here']},
[*] {alphabet: 'T', datas: ['tsome','tentries','tare here']},
[*] {alphabet: 'U', datas: ['usome','uentries','uare here']},
[*] {alphabet: 'V', datas: ['vsome','ventries','vare here']},
[*] {alphabet: 'W', datas: ['wsome','wentries','ware here']},
[*] {alphabet: 'X', datas: ['xsome','xentries','xare here']},
[*] {alphabet: 'Y', datas: ['ysome','yentries','yare here']},
[*] {alphabet: 'Z', datas: ['zsome','zentries','zare here']},
[*] ],
[*] alpha: '',
[*] windowHeight: ''
[*] },
[*] onLoad(options){
[*] try {
[*] //获取系统信息
[*] var res = wx.getSystemInfoSync()
[*] this.apHeight = 16;
[*] this.offsetTop = 80;
[*] this.setData({windowHeight: res.windowHeight + 'px'})
[*] } catch (e) {
[*]
[*] }
[*] },
[*] handlerAlphaTap(e) {
[*] //因为返回的是一个对象,我们定义一个对象接收
[*] let {ap} = e.target.dataset;
[*] //{ap}是对象,ap就是对象中ap属性的值
[*] this.setData({alpha: ap});
[*] },
[*] handlerMove(e) {
[*] let {list} = this.data;
[*] let moveY = e.touches[0].clientY;
[*] let rY = moveY - this.offsetTop;
[*] if(rY >= 0) {
[*] let index = Math.ceil((rY - this.apHeight)/ this.apHeight);
[*] if(0 <= index < list.length) {
[*] let nonwAp = list[index];
[*] nonwAp && this.setData({alpha: nonwAp.alphabet});
[*] }
[*] }
[*] }
[*]})
[/list]
[i]复制代码[/i]
逻辑层主要通过设置data中的数据传入到了布局中，实现了布局中绑定的事件。 最后我们还需要看下样式文件alphabetical.wxss
[list=1]
[*].alphabet-list .section-item .section-item-header {
[*] display: flex;
[*] align-items: center;
[*] font-size: 22rpx;
[*] color: #a8a8a8;
[*] background-color: #f2f4f5;
[*] padding: 4rpx 20rpx;
[*]}
[*]
[*].alphabet-list .section-item .section-item-cells {
[*] padding-left: 20rpx;
[*]}
[*]
[*].alphabet-list .section-item .section-item-cells .section-item-cell {
[*] font-size: 30rpx;
[*] line-height: 1.0;
[*] color: #333;
[*] padding: 29rpx 0;
[*]}
[*]
[*].border-bottom {
[*] border-bottom: 1rpx solid #dbdbdb;
[*]}
[*]
[*].alphanet-selector {
[*] position: absolute;
[*] top: 160rpx;
[*] right: 0;
[*] height: 864rpx;
[*] display: flex;
[*] flex-direction: column;
[*] align-items: center;
[*] justify-content: center;
[*] z-index: 100;
[*] box-sizing: border-box;
[*]}
[*]
[*].alphanet-selector .selector-one {
[*] display: flex;
[*] justify-content: center;
[*] align-items: center;
[*] font-size: 24rpx;
[*] color: #43c1f4;
[*] padding: 6rpx 6rpx;
[*] height: 24rpx;
[*]}
[/list]
[/td][/tr]
[/table]
|
|
