小程序仿联系人排序 汉字列表排序 汉字+数字 列表索引排序

小程序仿联系人列表排序 汉字列表排序 汉字+数字 列表索引排序

实现效果如下图所示，主要采用的是小程序UI组件库Vant Weapp的导航组件的IndexBar索引栏

---

---

一、安装UI组件库Vant Weapp

打开Vant Weapp官方文档https://vant-contrib.gitee.io/vant-weapp/#/quickstart
1、打开小程序项目所在目录，点击程序所在路径输入cmd回车


输入npm i @vant/weapp -S --production后回车

2、将 app.json 中的 “style”: “v2” 删掉
3、手动在 project.config.json 内添加如下配置
“packNpmManually”: true,
“packNpmRelationList”: [
{
“packageJsonPath”: “./package.json”,
“miniprogramNpmDistDir”: “./miniprogram_npm/”
}
]

在 project.config.json 内把重复的"packNpmRelationList": [],删掉
4、打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，完成构建

二、小程序安装拼音库

1、打开程序所在路径，输入cmd，回车

输入npm i wl-pinyin回车

2、打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，完成构建

三、程序

1.app.json

"usingComponents": {
      "van-index-bar": "@vant/weapp/index-bar/index",
      "van-index-anchor": "@vant/weapp/index-anchor/index",
      "van-cell": "@vant/weapp/cell/index"
    },

2.index.js

import Pinyin from 'wl-pinyin'
var originData = [{
  name: '啊2'}, {name: '啊1'}, {name: '安安'}, {name: '不'}, {name: '把'}, {name: '并'}, {name: '从'}, {name: '才'}, {name: '吃'}, {name: '陈'}, {name: '的'}, {name: '都'}, {name: '等'}, {name: '但'},{name: '额'}, {name: '呃'}, {name: '饿'}, {name: '恶'}, {name: '发'}, {name: '分'}, {name: '放'}, {name: '方'}, {name: '给'}, {name: '个'}, {name: '跟'}, {name: '过'}, {name: '和'}, {name: '好'}, {name: '还'}, {name: '后'}, {name: '就'},{name:'将'}, {name: '及'}, {name: '加'}, {name: '看'}, {name: '可'}, {name: '开'}, {name: '卡'}, {name: '吗'}, {name: '没'}, {name: '么'}, {name: '嘛'}, {name: '你'}, {name: '呢'}, {name: '那'}, {name: '您'}, {name: '哦'}, {name: '噢'}, {name: '偶'}, {name: '欧'}, {name: '怕'}, {name: '篇'}, {name: '1拍'}, {name: '1跑'}, {name: '1人'}, {name: '让'}, {name: '如'}, {name: '日'}, {name: '时'}, {name: '上'}, {name: '说'}, {name: '是'}, {name: '为'}, {name: '我'}, {name: '五'}, {name: '玩'}, {name: '下'}, {name: '先'}, {name: '想'}, {name: '向'}, {name: '有'}, {name: '一'}, {name: '要'}, {name: '也'}, {name: '之'}, {name: '做'}, {name: '中'}, {name: '在'}, {name: '1'}, {name: '2'}, {name: '3'}, {name: '4'}, {name: '5'}, {name: '6'}, {name: '7'}, {name: '8'}, {name: '9'}, {name: '11'}]
Page({
  data: {
    adminList: [],
    FristPin: ['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', '#'],
    number: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
    list: [],
  },
  onLoad(options) {
    this.hanziSort(originData)
  },
  hanziSort(origin) {
    var itemArr = [];
    for (let i = 0; i < origin.length; i++) {
      let fristName = Pinyin.getFirstLetter(origin[i].name).slice(0, 1);
      origin[i].first = fristName;
      itemArr.push(origin[i]);
    }
    let items = [];
    for (let i = 0; i < this.data.FristPin.length-1; i++) {
      var item = {};
      var thisFristPin = this.data.FristPin[i];
      item.index = this.data.FristPin[i]
      item.name = itemArr.filter(function (value) {
        return value.first === thisFristPin;
      });
      items = items.concat(item)
    }
    var item = {};
    item.index = '#';
    item.name=[]
    for (let i = 0; i < this.data.number.length; i++) {
      var number = this.data.number[i]
      let arr = itemArr.filter(function (value) {
        return value.first === number;
      })
      if (arr.length > 0) {
        item.name = item.name.concat(arr)
      }
    }
    items = items.concat(item)
    let newItems = []
    for (let i = 0; i < items.length; i++) {
      var name = [],
        item = {};
      item.index = items[i].index
      for (let j = 0; j < items[i].name.length; j++) {
        name = name.concat(items[i].name[j].name)
      }
      name = name.sort(function compareFunction(item1, item2) {
        return item1.localeCompare(item2);
      });
      item.name = name
      newItems = newItems.concat(item)
    }
    this.setData({
      list: newItems
    })
  }
})

3.index.wxml

<van-index-bar index-list="{{FristPin}}">
  <view wx:for="{{list}}">
    <van-index-anchor index="{{item.index}}"/>
    <van-cell wx:for="{{item.name}}" title="{{item}}" />
  </view>
</van-index-bar>

---