小程序实现索引列表排序-阿里云开发者社区

开发者社区> 小周sir> 正文

小程序实现索引列表排序

简介: 小程序实现索引列表排序
+关注继续查看


在小程序中,会有一些需求,常常会有一些按字母A-Z排序,写过一篇关于vue的字母排序,点击这里查看,今天写一篇关于小程序字母排序的案例,效果展示如下
 

 

  

写之前要和后端定义好数据结构字段,这是我定义的这种数据接口,然后和后端沟通,给我返回这样的结构。

[
{

"letter":"A",
"data":[
  {"id": 56,"Name": "奥特曼玩具" },
]

},{

"letter":"B",
"data":[
  {"id": 83,"Name": "巴黎水玻璃瓶"},
  { "id": 346,"Name": "保温杯"},
]

},{

"letter":"C",
"data":[
   {"id": 91, "Name": "茶叶罐"},
  {"id": 92, "Name": "炒菜铁锅"},
]

},{

"letter":"D",
"data":[
  {"id": 9,"Name": "打印纸"
  },
  {"id": 10, "Name": "地板砖"},
]

}
]
1.页面的初始数据
在data定义一个letter字母数组,用于存放数组的,字母是data直接定义好的,然后在页面直接循环遍历就行
letter: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"],
2.页面布局


<!-- 右边字母 -->
<view class='list'>
  <view 
    class='item' 
    catchtap='handleLetters' 
    data-item='{{item}}' 
    wx:for="{{letter}}" 
    wx:key="index">
    {{item}}
  </view>
</view>

<!-- //左边 -->
<scroll-view scroll-y="true" scroll-with-animation  style="height: {{height}}px" scroll-into-view='{{cityListId}}'>
  <view class='area-wrap'>
    <block wx:for='{{cities}}' wx:for-item='letterItem' wx:key='index'>
    <view class='area'>
        <view class="title" id='{{letterItem.letter}}'>{{letterItem.letter}}</view>
        <view class='item-list'>
          <view class='item' catchtap='handleLetter' wx:for='{{letterItem.data}}' wx:key="index" data-index='{{index}}' data-val='{{item.name}}'>{{item.name}}</view>
        </view>
    </view>
  </block>
  </view>
</scroll-view>



2.1右边字母这个直接从data定义的字段,然后通过wx:for循环遍历拿到,展示到页面效果就行。

2.2左边内容展示区域,主要利用小程序提供的scroll-view和scroll-info-view

scroll-view:视图滚动

scroll-info-view:绑定了一个值,通过handleLetters点击事件实现锚点,相当于a标签中的#,点击跳转对应的位置,首先需要在data定义一个字段cityListId

{{letterItem.letter}}
通过handleLetters点击跳转到对应的id位置,这个是循环遍历的时候获取到的字母,通过scroll-into-view='{{cityListId}}',与 id='{{letterItem.letter}}' 匹配是那个锚点,跳转。scroll-with-animation一个动画延迟的效果

handleLetters(e) {

const Item = e.currentTarget.dataset.item;
this.setData({
  cityListId: Item
});

},
2.3循环遍历,第一次循环遍历,在这是拿到每个字母展示。注意wx:for遍历的时候,需要绑定一个key值

{{letterItem.letter}}
再次遍历是拿到data里面每个字母对应的值。

{{item.name}}
2.4高度是通过小程序提供的一个api来计算出小城市高度赋值,也是需要在data定义好一个height字段

wx.getSystemInfo({

  success: function(res) {
    // 计算主体部分高度,单位为px
    that.setData({
      height: res.windowHeight
    })
  }
})

写到最后,提供一个关于城市列表的数据接口,是自己已经整理好的,拿来直接可以用的,和我定义小程序的字段一模一样的点击这里

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
python实现插入排序算法
插入排序,其原理是通过构建一个初始的有序序列,然后从无需序列中抽取元素,插入到有序序列的相对排序位置,就像将一堆编号混乱的书,一本一本的放到书架上,找到上下编号之间的位置插入,最后完成整理。 python实现插入排序并不难,从第二个位置开始遍历,与它前面的元素相比较,如果比前面元素小就交换位置,实...
814 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
3954 0
C实现特定字符串数据的排序与输出
一、案例完整代码 点击(此处)折叠或打开 /**************************************************************** * Name : sort_and_output.c * Author : dyli2000 * Date : 20121102 * Description :     对学生成绩由高到低输出案例。
830 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5667 0
c++ builder TTreeView customSort 实现 自定义排序
//---------------------------------------------------------------------------int __stdcall mySort(long n1,long n2, long Reverse){ TTreeNode *Node...
690 0
+关注
小周sir
面对过去,不要迷离;面对未来,不必彷徨;
50
文章
41
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载