wepy-城市按字母排序

 

好吧，我不跟网上的人一样 ，之贴出代码  也没有数据结构，我很烦这样的 所以我先贴一下数据结构

下图是没有修改的，直接从后台请求回的数据

下图是经过修改后的数据

 

 在block（因为后面我还需要多个view来用 ，所以就直接加了一个block，如果你就一个view就不用写了）里面写好你需要渲染的数据列表，其中想要使用字母索引的城市选择，我在这里推荐       index索引选择器 

 上面说完了，下面就是写逻辑了，我用的actions， reducers，types 三个文件来返回数据的，返回的数据就是第一张图里的cities。

因为要字母索引，所以在onLoad函数里重新new了一个新的数组，引用laodash里的foreach函数生成27个字母索引数组在words里

同样的 。我要遍历我得到的数组   item.pinyin.substring(0, 1).toUpperCase() 是获取我得到的数组里的拼音里第一个字母把他转变为大写字母

把符合的相同类型push到字母索引里

 就如下图所示

 然后把所得到的数组循环出来就好了 剩下的就不难了

 

我把最后的渲染图拿出来吧

在这里  我要特别说明一下 ，我在这上面踩了很多坑  首先，iviewui确实不错，但是当初设计的时候是按照全局来设计的，也就是说，它会和你在这个页面上再加的view “断流”

这个超级恶心。但是，开发者还是给我们留了一点点后路，在这里我就提一下。

 

万幸的是 开发者留下了一个接口。externalClasses: ['i-class'] 可是救命的东西

它预留了一个接口，平常在外面定义的普通class是不会对这个组建的样式起作用的。这个的作用是让普通的class也起作用

用法就是你定义好的class 在这个组件上要 i-class =“your classname”这样就起作用了。

这个版本是上几个版本了  写的不咋地，如果有空我会把我优化好的demo发一下

先将就这么看吧。