[插件/工具]微信小程序实用组件:带字母滑动的listview

http://www.wxapp-union.com/thread-2159-1-1.html

这是一个带字母可滑动的列表小程序。

电脑上的截屏

[插件/工具]微信小程序实用组件:带字母滑动的listview

如何使用
  • 复制page下的文件夹到自己项目中
  • 配置app.json
  • 编译
功能
  • 带字母滑动或点击选择的列表页面
  • 在android ios 平台测试,确保真实环境一致
  • 小程序目前不支持组件化;后期会抽离一些公共的东西,让使用起来更加方便

代码示例:
[AppleScript] 纯文本查看 复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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.pixelRatio = res.pixelRatio;
      // this.apHeight = 32 / this.pixelRatio;
      // this.offsetTop = 160 / this.pixelRatio;
      this.apHeight = 16;
      this.offsetTop = 80;
      this.setData({windowHeight: res.windowHeight + 'px'})
    } catch (e) {
       
    }
  },
  handlerAlphaTap(e) {
    let {ap} = e.target.dataset;
    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});
      }
    }
  }
})


项目地址及下载:项目地址:https://github.com/zhongjie-chen/wx-alphabetical-listview(欢迎star)
项目下载: [插件/工具]微信小程序实用组件:带字母滑动的listview wx-alphabetical-listview-master.zip (4.75 KB, 下载次数: 37)