开源项目 cube-ui 组件之 indexList 使用心得

rozwel · 2017年12月15日 · 最后由 rozwel 回复于 2017年12月18日 · 667 次阅读
本帖已被设为精华帖!

indexList是什么?

indexList组件是cube-ui库中的一个列表组件,整合了better-scroll,在移动端拥有良好的滚动效果,并且提供了快速导航的组件,可以点击的时候快速定位到对应分类中。

遇到的问题

本人的基友想找我帮他做个应用,其中有个场合很适合用这个组件,我个人来讲也很喜欢cube-ui的组件风格,所以就用在了项目里。但是遇到了个问题:我的数据结构和indexList官方要求的数据结构有很大的出入。

我的数据结构

[
  { _id: 5a335af8d01140144c9e7c8f, name: '不挖宝' },
  { _id: 5a335adcd01140144c9e7c8c, name: '呃呃呃' },
  { _id: 5a335ae1d01140144c9e7c8d, name: '咕咕咕咕' },
  { _id: 5a335d44d01140144c9e7c94, name: '哎哎哎' },
  { _id: 5a335a81d01140144c9e7c88, name: '啊' },
  { _id: 5a335d3bd01140144c9e7c92, name: '嗷嗷嗷' },
  { _id: 5a335aead01140144c9e7c8e, name: '嘤嘤嘤嘤' },
  { _id: 5a335d37d01140144c9e7c91, name: '安安安' },
  { _id: 5a335a96d01140144c9e7c89, name: '巴巴爸爸' },
  { _id: 5a335abfd01140144c9e7c8b, name: '巴巴爸爸吧' },
  { _id: 5a334007066a932f34ce3d57, name: '测试1' },
  { _id: 5a335b01d01140144c9e7c90, name: '能(*@ο@*) 哇~' },
  { _id: 5a335aaad01140144c9e7c8a, name: '脱脱脱' },
  { _id: 5a335d3fd01140144c9e7c93, name: '鹅鹅鹅饿饿' } 
]

indexList要求的数据结构

[
  {
    "name": "★Hot City",
    "items": [
      {
        "name": "BEIJING",
        "value": 1
      },
      {
        "name": "SHANGHAI",
        "value": 2
      }
    ]
  },
  {
    "name": "A",
    "items": [
      {
        "name": "ANSHAN",
        "value": 3
      },
      {
        "name": "ANQING",
        "value": 4
      }
    ]
  }
]

然后当时想着:哇这可怎么办QAQ

因为数据录入也是在项目中的功能,基本不可能让用户(其实就我基友一个人)自己去主动维护name列,而且也很难去验证name是否对应的是输入的name字段的拼音第一个字母大写,那么要举白旗了吗?

作为程序员怎么能这样就投降了呢-v-*

终于我找到了解决方案:一个实现汉字与拼音互转的小巧web工具库

对这个库感兴趣的同学们可以去查看一下,我们这里只用到了pinyinUtil.js和pinyin_dict_firstletter.js两个文件,因为我们只要成功将第一个大写字母提取出来就可以了。

这里有个地方要注意:因为我是用的vue框架,而且这个库并没有实现模块化,所以我们要改个地方:

pinyin_dict_firstletter.js

- var pinin_dict_firstletter = {};
+ window.pinyin_dict_firstletter = {};

这样使用import引入这两个文件就不会报错了。

要注意先引入pinyin_dict_firstletter.js再引入pinyinUtil.js

name字段的问题解决了,接下来就是数据结构了

import '@/common/js/pinyin_dict_firstletter.js';
import '@/common/js/pinyinUtil.js';
export function formatDocs(docs) {
  let format = [];
  let hashArray = [];
  for (let doc of docs) {
    let upper = pinyinUtil.getFirstLetter(doc.name)[0].toUpperCase();
    if (hashArray.includes(upper)) {
      for (let group of format) {
        if (group.name === upper) {
          group.items.push(doc);
        }
      }
    } else {
      hashArray.push(upper);
      let group = {
        name: upper,
        items: [doc]
      };
      format.push(group);
    }
  }

  format.sort((a,b) => {
      return a.name > b.name;
  })
  return format;
}

在vue文件中使用这个方法,并查看效果

emmmm....还可以~

当然目前indexList我个人感觉还是有可以优化的地方,比如只支持文字列表。后面的某个版本会增加slot的特性,让我们拭目以待吧。

这是我在使用indexList组件的心得,希望其他使用这个组件的朋友们可以用作参考,少走弯路^

共收到 4 条回复

不错啊,可以的。移动端很合适。数据结构解决的也比较完美。支持~😼 😼

es6china 将本帖设为了精华贴 12月15日 15:25
es6china 回复

😁 谢谢群主大大捧场~

rozwel 回复

客气客气~~

修改了一下代码,将sort提到了for循环的外层,这样的话代码性能可以提升一下。

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册