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

来源：互联网发布：电信云计算编辑：程序博客网时间：2024/06/05 04:13

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){
      letindex= 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)

阅读全文

0 0