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

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

不懂如何导入demo的新手，请查看此链接；还是不懂，请加群536592077

这是一个带字母可滑动的列表小程序。 电脑上的截屏 如何使用 复制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） 项目下载：  wx-alphabetical-listview-master.zip (4.75 KB, 下载次数: 37)