如何在前端实现语义缩放（第一步）-白红宇

如何在前端实现语义缩放（第一步）

阅读量：6553 次

发布时间：2019-06-24

本文共 2123 字，大约阅读时间需要 7 分钟。

在phone中找联系人的时候，点击那个拼音首字母，26个字母会在当前屏幕全部显示。这种语义缩放在WP中是一种控件。所有歌曲的名称也可以这样快速查找。

对于小的手机屏幕不适合一页一页的翻页，这个语义缩放真是太方便了。

在JS中怎么实现，先上图：

源代码：

通过对比，可以发现，按拼音首字母已经排序了。并且在每组（按首字母分组）的第一个词语前加上了首字母拼音。

做这个功能的关键是，所有汉字的拼音字典。（网上很多，一个JSON即可）

JS中的关键函数是get，输入汉字，返回拼音。

var Pinyin = {} Pinyin._ucfirst = function (l1) {    if (l1.length > 0) {        var first = l1.substr(0, 1).toUpperCase();        var spare = l1.substr(1, l1.length);        return first + spare;    }}Pinyin._arraySearch = function (l1, l2) {    for (var name in this._pinyin) {        if (this._pinyin[name].indexOf(l1) != -1) {            return this._ucfirst(name); break;        }    }    return false;}Pinyin.get = function (l1) {    var l2 = l1.length;    var I1 = "";    var reg = new RegExp('[a-zA-Z0-9\- ]');    for (var i = 0; i < l2; i++) {        var val = l1.substr(i, 1);//拆分后的输入字符               var name = this._arraySearch(val, this._pinyin);//不为false表示找到的拼音        if (reg.test(val)) {
   //半角字母或数字输出原字符            I1 += val;        } else if (name !== false) {            I1 += name;        }    }    I1 = I1.replace(/ /g, '-');    while (I1.indexOf('--') > 0) {        I1 = I1.replace('--', '-');    }    return I1;}

完整的HTMl源码：

接下来是添加拼音首字母事件，点击后一屏出现26个字母，可用的字母用亮色表示，不可用的字母用暗色背景表示。然后点击可用字母后自动定位。

扩展用途：定位时自动获取翻页数据。

适用场景：小屏幕上找列表项是词语或短语的又需要翻页的。这个比传统的翻页更方便。

（拼音JSON较大，稍后附上）

转载地址：http://epjco.baihongyu.com/

你可能感兴趣的文章