uView1.0 indexList索引列表遇到的坑

已于 2022-09-27 17:36:23 修改
阅读量6.7k 收藏 5
点赞数
文章标签： html
于 2021-09-18 15:07:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haosicx/article/details/120367472
版权

在使用uView索引列表做通讯录的时候遇到了几个问题

先上图片
在这里插入图片描述

问题1: 右侧的abcd首字母按钮点击错乱 比如点了f 弹出显示的是a开头的人(应该是f开头的人才对)

  • 通过排查 发现传入这个右侧组件参数的时候 后端并没有返回完整的A-Z 而是有A首字母的数据 才返回了A 没有F首字母的 就没有返回F 导致数据整体A-Z不完整 所以传进入组件后显示就出问题了 所以不管数据有没有都要想办法把A-Z匹配完整才行

问题2: 点击右侧的按钮 不会锚点跳转 比如点击Z 要跳转到Z的首字母那里去

  • 后来发现uView只提供了点击右侧按钮的回调方法 (可以拿到点击的字母) 并不自带跳转 于是我们首先给每一个列表添加上一个id id就是当前的字母 然后通过dom拿到这个元素距离顶部的距离 然后拿到最外层的元素顶部的距离 去滚动即可
 clickSelect(e) {
        //从当前位置到达目标位置
        uni
          .createSelectorQuery()
          .select('#' + e) 
          .boundingClientRect((data) => {
            //目标位置的节点：类或者id
            uni
              .createSelectorQuery()
              .select('.container')
              .boundingClientRect((res) => {
                //最外层盒子的节点：类或者id
                this.$nextTick(function () {
                  uni.pageScrollTo({
                    scrollTop: data.top - res.top,
                    duration: 0 //app端这个必须设置成0
                  })
                })
              })
              .exec()
          })
          .exec()
      },

2022年 第二次更新
第二个问题其实是是索引列表自带了跳转的 上面我写的方法其实也可以不用 主要还是数据格式要对才行

楼下放上mock数据格式 和源码 业务代码直接复制的 有些东西是无用的 可以自行删除

export const aaa = [
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'A'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'B'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'C'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'D'
  },
  {
    data: [],
    letter: 'E'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'F'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'G'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'H'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'I'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'J'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'K'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'L'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'M'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'N'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'O'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'P'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'Q'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'R'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'S'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'T'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'U'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'V'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'W'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'X'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'Y'
  },
  {
    data: [
      {
        id: '9e2c82ee2a054496bf6297442763d5c4',
        provinceName: '海南省',
        cityName: '三亚市',
        countyName: '天涯区',
        townName: '天涯镇',
        villageId: '460204198222',
        villageName: '抱前村',
        groupName: '干沟一村',
        groupId: '46020419822208',
        address: '海南省|三亚市|天涯区|天涯镇|抱前村|干沟一村',
        fullName: '邱明俊',
        fullNameInitials: 'Q',
        phone: '13222222222',
        roleCode: 'villager',
        roleName: '',
        idcard: '340825199611010412',
        managingIdcard: '340825199611010412',
        positionName: null,
        avatar: null,
        isRegister: '0',
        isPartyMember: '0',
        isGridMember: '2',
        gender: null,
        partyBranchCommittee: null,
        villagerCommittee: null,
        userId: '1431210121718927361'
      }
    ],
    letter: 'Z'
  }
]


<!--
 * @Author: LWF
 * @Date: 2021-09-01 18:43:10
 * @LastEditTime: 2021-09-22 11:20:02
 * @LastEditors: Please set LastEditors
 * @FilePath: /src/pagesCountry/address/index.vue
 * @Description: 通讯录
-->
<template>
  <view class="container wrapper">
    <view class="header" style="padding: 10px">
      <u-search
        bg-color="#fff"
        placeholder="搜索姓名 / 小组名 / 身份类型"
        :show-action="false"
        v-model="keyword"
        @change="searchChange"
      ></u-search>
      <u-icon
        @click="tooptilpShow = true"
        name="info-circle"
        color="#2979ff"
        size="40"
      ></u-icon>
      <u-modal
        v-model="tooptilpShow"
        content="搜索以下身份类型，可批量展示该身份的村民: 党员、村组长、户主、网格员、村民委员会、村党支部委员"
      ></u-modal>
    </view>
    <view class="main">
      <u-index-list :scrollTop="scrollTop">
        <view v-for="(item, index) in indexList" :key="index" :id="item.letter">
          <u-index-anchor :index="item.letter" v-show="item.data.length" />
          <view class="list" v-for="(n, i) in item.data" :key="i">
            <view>
              <text>{{ n.fullName }}</text>
              <text class="label-grounp">{{ n.groupName }}</text>
            </view>
            <view class="icon">
              <u-icon
                @click="chat"
                name="/static/image/i-msg.png"
                style="margin-right: 13px"
                size="55"
              ></u-icon>
              <u-icon
                @click="call(n.phone)"
                name="/static/image/i-phone.png"
                size="55"
              ></u-icon>
            </view>
          </view>
        </view>
      </u-index-list>
    </view>
  </view>
</template>

<script>
  import { getUserList } from '@/api/send/index'
  import { aaa } from './list'
  export default {
    data() {
      return {
        show: false,
        tooptilpShow: false,
        scrollTop: 0,
        indexList: [],
        list2: [],
        list1: [],
        keyword: ''
      }
    },
    onPageScroll(e) {
      console.log('执行')
      this.scrollTop = e.scrollTop
    },
    onLoad(val) {
      //   获取所有人  
      this.getAllList()
    },
    methods: {
      //  点击锚点跳转 
      // clickSelect(e) {
      //   //从当前位置到达目标位置
      //   uni
      //     .createSelectorQuery()
      //     .select('#' + e)
      //     .boundingClientRect((data) => {
      //       //目标位置的节点：类或者id
      //       uni
      //         .createSelectorQuery()
      //         .select('.container')
      //         .boundingClientRect((res) => {
      //           //最外层盒子的节点：类或者id
      //           this.$nextTick(function () {
      //             uni.pageScrollTo({
      //               scrollTop: data.top - res.top,
      //               duration: 0 //app端这个必须设置成0
      //             })
      //           })
      //         })
      //         .exec()
      //     })
      //     .exec()
      // },
      //   选择所有人 
      getAllList() {
        const params = {
          searchValue: this.keyword
        }
       // 这里数获取数据 换成mock的数据即可
        getUserList(params).then((res) => {
          // this.indexList = aaa
          this.indexList = res.data
          this.indexList.filter((item) => {
            if (!item.data) {
              item.data = []
            }
          })
        })
      },
      //   跳转到聊天 
      chat() {},
      //   打电话 
      call(val) {
        uni.makePhoneCall({
          // 手机号
          phoneNumber: val
        })
      },
      //   搜索 
      searchChange() {
        this.page = 1
        this.sendList = []
        this.getAllList()
      },
      //   点击提示 
      tooptilp() {}
    }
  }
</script>

<style lang="scss" scoped>
  .header {
    display: flex;
    justify-content: space-between;
    background-color: white;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
    .btn {
      width: 200rpx;
      height: 60rpx;
      // float: right;
      // margin-right: 30rpx;
    }
  }
  .main {
    .radio-group {
      //
      display: flex;
      flex-direction: column;
    }
  }
  .footers {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 20rpx;
    display: flex;
    justify-content: flex-end;
    background-color: #fff;
    z-index: 999;
  }
  .list {
    background-color: #fff;
    padding: 10rpx 40rpx;
    font-size: 17px;
    display: flex;
    justify-content: space-between;
    .icon {
      margin-right: 20px;
    }
  }
  .footer {
    background-color: white;
    display: flex;
    .btn {
      height: 60rpx;
      width: 180rpx;
    }
  }
  .headerFlex {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 0 10px;
  }
  .label-grounp {
    font-size: 12px;
    background-color: #69d4af;
    padding: 3px;
    color: #f5f5f5;
    border-radius: 8px;
    margin-left: 10px;
  }
  .wrapper {
    height: auto !important;
  }
  .fiex {
    position: fixed;
    top: 40px;
    z-index: 999;
  }

  ::v-deep {
    .u-index-bar__index {
      color: #000 !important;
    }
  }
</style>
haosicx
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
uni-app [全端兼容] - 详细实现城市选择索引列表（通过 A-Z 排序的城市列表），全国城市列表选择右侧a-z字母排序功能，城市自动按首字母分类（详细示例源代码，一键复制运行即可）
王佳斌
08-10 5568
uniapp，全国市区列表选择，a-z字母排序城市列表，uniapp 仿美团饿了么城市列表+顶部搜索，中国34个省市按字母排序 uniapp城市列表，uniapp根据区域的首字母进行排序分类并可在右侧进行点击跳转，uni-app选择城市（城市列表选择），uni-app城市选择索引列表（A - Z），英文字母索引全国城市uni-app做A-Z排序城市列表、索引列表，uniapp选择所有城市通过索引方式，英文字母索引全国城市数据，Vue uniapp省份城市列表选择、省市选择，uniapp定位城市索引列表，uv
自定义View----点击滑动选择字母列表
07-13
关于这个demo的博客分析地址：http://blog.csdn.net/abren32/article/details/46865723
uview indexList 按字母跳转不了
LlanyW的专栏
09-08 1002
点击字母跳转不到位的问题：在添加方法@select=“clickSelect“锚点要加id，用对应的字母做为id值，
vue实现indexlist 组件
yuange
02-22 1574
<template> <div> <scroll class="scroll" :data='singerList' :pullUpLoad=true @pullUpLoad='pullUpLoad' :pullDownRefresh={s...
uview IndexList 索引列表 数据处理方案
luo_luo_yao的博客
03-27 489
uview是不会主动帮你处理数据的，itemArr里的数需要自己从A-Z排序。而后台返回的好友数据也是直接一个数组，这个时候就需要我们自己处理数据了。直接拿userName这个字段返回的中文名称进行匹配。获取它们的首字母拼音之后按照顺序放入不同的数组中。看到uview有现成的就直接拿过来使用了。展示代码直接从uview官网cv过来，简单快捷。然后创建一个能直接获取到indexList数据的js文件vue-py.js。1.创建一个编写汉字和编码文件对应的js文件；我们在代码中调用的时候只需要简单调用就行了。
uniapp 多端兼容开发遇到的问题总结（四) ——专题：uView在弹出层里使用索引列表
NurTuam—何永杰
11-06 7252
前言 在使用uView开发项目中，遇到了一个业务场景： 点击输入框弹出底部窗口，内置电话号码区号索引列表，点击切换区号 : 当我根据逻辑以为在 u-popup 里加入 u-index-list 就行了，结果遇到问题了： 索引列表滚动不了； 选择索引字符，列表吸顶不了； 瞄点与顶部距离有偏差。 所以作者开始排查，但api文档没写相关用法，于是开始百度，但发现大家都在询问…（可能大家也百度过这类文章：https://ask.dcloud.net.cn/question/103729） 于是作者只能去修改源
关于 uview 的indexList跳转不到位的问题：添加方法@select=“clickSelect“
weixin_63515766的博客
01-12 1382
关于 uview 的indexList跳转不到位的问题
uniapp商城实战之uView UI框架前端极速开发
07-25
<p> <img src="https://img-blog.csdnimg.cn/c315e4094a894ba693a2d69c90db4032.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAb25lbmVzc3h5,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center" alt="实战商城app之uView框架前端极速开发课程" /> </p>
uview IndexList 索引列表 小程序点击右侧字母 错乱
wangyicsd的博客
07-09 730
uview IndexList 索引列表 小程序点击右侧字母 错乱
u-view使用记录-IndexList 索引列表
H763857881的博客
08-18 6073
u-view IndexList 索引列表问题使用记录 最近项目中使用了自定义导航栏，然后uview的索引列表的使用出了点问题，记录下自己的解决方法 根据文档加了offset-top属性后，ABC这行分隔的是移动到了需要的位置，内部的数据还是移动到了top为0的地方 方法 找到uview-ui里的u-index-list文件，注释这段代码，这部分的移动，并没有计算传进来的offset-top属性，可能之后的版本会修复吧 给右侧索引加个id 点击时，移动整个列表，圈中部分是头部和列表上面其他元素的高度
uview2.0uview2.0
04-22
uview2.0uview2.0uview2.0uview2.0uview2.0
移动端效果之IndexList详解
08-29
主要为大家详细介绍了移动端效果之IndexList，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
uView1.0.zip
11-22
主要解决现在创建uView项目为2.0版本的人群，直接拖进IDE，点击运行即可
基于多平台快速开发的UI框架uView UI1.0二次开发的diy-uView-ui，是uni-app生态优秀的UI框架
11-20
基于多平台快速开发的UI框架uView UI1.0二次开发的diy-uView-ui，是uni-app生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水，支持 Vue3.0 了。结合DIY可视化快速生成代码。DIY 官网可视化工具...
微信小程序字母检索indexList
08-10
微信小程序字母检索-indexList
html--魔方
最新发布
stqer的博客
05-05 735
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> :root { --cube-size: 50vmin; --side-size: calc(var(--cube-size) /
用html画一个四叶草
liulang68的博客
04-20 2348
以上是部分代码，需要请看主页加联系方式。
在HTML中使用JavaScript实时显示当前日期和时间（结尾完整例程）
weixin_67244432的博客
04-29 781
在Web开发中，经常需要在网页上显示当前的日期和时间。HTML本身并不具备这样的动态功能，但我们可以借助JavaScript来实现。JavaScript是一种常用的前端脚本语言，它可以轻松地获取系统时间，并将其插入到HTML元素中。现在，当您打开这个HTML页面时，它将实时显示当前的日期和时间，并且每秒都会自动更新。的JavaScript文件，并编写用于获取和格式化当前日期时间的函数。首先，我们创建一个HTML文件，并在其中添加一个用于显示日期和时间的。函数，以便实时更新显示的日期时间。
uview里 methods跳转页面
06-02
在uView中，您可以使用以下方法来跳转到另一个页面： 1. 使用页面链接：您可以在template中使用 `navigator` 组件来创建一个超链接，点击该链接将导航到另一个页面。 例如： ```html <!-- 在template中添加navigator组件 --> <navigator url="/pages/page2/page2">Go to Page 2</navigator> ``` 2. 使用`uni.navigateTo()`方法：您可以使用`uni.navigateTo()`方法来编程式地导航到另一个页面。 例如： ```javascript uni.navigateTo({ url: '/pages/page2/page2' }); ``` 3. 使用uView提供的`$mRouter`方法：uView提供了`$mRouter`方法，您可以使用它来跳转到另一个页面。 例如： ```javascript this.$mRouter.push({ url: '/pages/page2/page2' }); ``` 请注意，这些方法可能会因您的特定情况而有所不同。您应该根据您的需求和技术栈来选择适合您的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值