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发一下

先将就这么看吧。

原文地址:https://www.cnblogs.com/zx-qd/p/10560748.html