uni-app 写小程序 索引列表，仿微信通讯录

最新推荐文章于 2024-08-07 15:03:37 发布
最新推荐文章于 2024-08-07 15:03:37 发布
阅读量2.9k 收藏 7
点赞数 2
文章标签： 微信小程序 vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37732761/article/details/123689086
版权
本文介绍如何使用uni-app创建类似微信通讯录的索引列表。首先从uni-app官网下载indexlist插件，然后在carLists中处理请求数据。插件内missthee-indexlist.vue文件夹用于自定义样式和添加头像。完成这些步骤后，即可实现具有头像的索引列表。如有问题，可联系作者邮箱yuyong1663519276@163.com。
摘要由CSDN通过智能技术生成

心里认定了一个女孩 就要好好的珍惜对待她，人生不容辜负，你必须要更加努力 。加油 骚年

uni-app 写小程序 索引列表，仿微信通讯录

在这里插入图片描述

去uni-app官网 下载插件 indexlist

	<missthee-indexlist :data="carLists" placeholder='输入关键字进行查询' @select-item='selectHandler'></missthee-indexli
最低0.47元/天 解锁文章
你不努力，是等什么嘛
关注
uniapp [全端兼容] - 详细实现全国城市列表A-Z市区名称索引功能，根据城市首字母分类排序城市列表选择页面，全屏省市区右侧悬浮字母索引可拖曳滑动及点击定位锚点城市名称（提供最新全国城市数据）
王佳斌
07-17 2812
uniapp，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，城市列表，a-z字母的索引排序，市区名称，城市位置，选择位置时的城市列表，城市列表选择，uniApp城市列表选择，整页，通过A-Z排序的城市列表，城市自动按首字母分类，实现城市列表选择页面功能，插件组件，中国全部市区城市索引列表，右侧悬浮a至z排序点击跳转到对应城市首字母列表单独页面，如何实现整页都是市区名称列表的城市选择功能，uview uni-indexed-list，全国市区列表选择，搜索，根据区
uniapp：索引列表
薇眠winter的博客
09-20 3169
uniapp：索引列表
【uniapp索引列表】移动端uniapp使用uni-indexed-list索引列表方法，增加图片头像方法，覆盖全屏解决办法
seeeeeeeeeee的博客
04-06 5773
最近做到了一个移动端联系人列表功能但是不让使用移动端的ui库，只能使用uniapp的组件所以就发现了这个索引列表组件但是使用过后发现有一点问题，比如我需要头像，但是他没有自带图片功能。比如我使用过后，我自定义了导航栏但是被覆盖住了，把导航栏顶没了。这里我都一一的解决了，所以这里记录一下。完整代码直接发出来看吧问题点是：这个组件给自己的最外层盒子加了个定位，在这里所以就造成了他是脱离文档流的，然后会导致比如你再上写了其他的组件比如搜索栏，
uniapp——列表选择样式
最新发布
努力、拼搏、奋进
08-07 475
uniapp——列表选择样式
【uniapp】仿微信通讯录列表实现
Komorebi_00的博客
11-10 861
【代码】仿微信通讯录列表实现。
微信小程序仿通讯录功能
11-20
本文实例为大家分享了微信小程序实现通讯录功能的具体代码，供大家参考，具体内容如下 微信小程序模仿通讯录功能需要用到scroll-view标签 思路：首先需要获取到你所需要展示的数据样式的高度(这就需要用到微信给我们提供的一个API来完成了，因为小程序是没有DOM树结构的，这个可以去看我的前一篇里面有详细的记载怎么获取想要的元素的宽高。)，然后组合成一个高度数组(便于后面根据这个数组进行判断)，再获取滚动距离，用这两个比较判断之后就可以得出滚动的时候右边选中的字母了，然后再利用scroll-view标签的scroll-into-view属性来实现点击右侧导航字母，对应的左侧列表滚动到相应的位置。
小程序组件-仿微信通讯录
weixin_33849942的博客
09-12 538
运用了该组件的小程序开发完成，详情请看HMusic效果图因为是使用的手机录屏，视频格式为MP4，上传到文章时发现只支持图片，还好电脑自动录屏功能，所以简单的录制了一下，完后又提示只能4M，只能再去压缩图片，所以画质略渣，各位客官讲究的看看吧。特色功能介绍用户只需按照格式传入参数，组件能够自动将参数按首字母分组，简单方便；组件右侧首字母导航无需另外传值，并且根据参数具体有哪些首字母显示（没有的咱就不...
uni-app 实现小程序 仿微信 我的界面
03-30
【uni-app实现小程序：仿微信“我的”界面详解】 在移动应用开发领域，uni-app是一个备受推崇的跨端框架，它允许开发者用一套代码编写应用，同时发布到多个平台，如微信小程序、支付宝小程序、H5、App等。本教程将...
uni-app微信小程序登录授权的实现
10-15
在开发uni-app微信小程序时，实现用户登录授权是至关重要的一步，这有助于提供个性化的服务并确保用户数据的安全。本文将深入探讨如何在uni-app中实现微信小程序的登录授权，并提供详细的步骤和示例代码。 首先，...
微信小程序仿通讯录demoWxPhone_list-master.zip
09-25
微信小程序仿通讯录demoWxPhone_list-master.zip
微信小程序仿通讯录
01-27
该代码不做维护，完整代码请访问 WxPhone_list 微信小程序仿通讯录 效果图 话不多说，先上效果图 因为是使用的手机录屏，视频格式为MP4，上传到文章时发现只支持图片，还好电脑自动录屏功能，所以简单的录制了一下，完后又提示只能4M，只能再去压缩图片，所以画质略渣，各位客官讲究的看看吧。 特色功能介绍 用户只需按照格式传入参数，组件能够自动将参数按首字母分组，简单方便； 组件右侧首字母导航无需另外传值，并且根据参数具体有哪些首字母显示（没有的咱就不要）； 用户进行上下滑动时，左右相互联动； 点击右侧导航，组件会相应的上下滚动。 实现基础 说到滚动当然少不了小程序的基础组件scroll-view，该组件就是在此基础上实现的； 监听组件scroll-view的bindscroll事件，进而对组件数据进行操作，即可完成。 Wxml 滚动区域 <scroll-view scroll-y s
基于uni-app开发的微信小程序商城项目
08-03
uni-app巨惠购微信小程序介绍 此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网...
uni-app使用微信小程序云函数的步骤示例
10-15
在本教程中，我们将深入探讨如何在uni-app中使用微信小程序云函数。uni-app是一个多端开发框架，它允许开发者使用一套代码实现跨平台应用，包括iOS、Android、H5、微信小程序等。而微信小程序云函数则是在微信小程序...
uni-app 实现自定义按 A~Z 排序的通讯录(字母索引导航)
热门推荐
UserGuan的博客
09-15 1万+
页面样式就不贴了，很简单的 UI 布局。将下面的内容复制粘贴到其中。methods 里面。
uniapp实现的类似于微信的字母滑动索引效果
challenge_study的博客
03-12 681
uniapp实现的类似于微信的字母滑动索引效果
【uniapp前端组件】仿微信通讯录列表组件
只会瞎搞
08-18 3200
本组件有三个自定义组件构成，都已经集成在中，该组件具有两种模式，不带选择框和带选择框，分别对应前言的两种功能。属性名类型默认值必填说明Array空是通讯录列表数据String空是1、格式为时，本属性只能为空。2、格式为[{name:'通讯录组件',id:'bugking7-contact-list'},{name:'字母列表组件',id:'bugking7-letter-list'},{name:'选择框组件',id:'bugking7-contact-circle'}]时，本属性为。...........
【uniapp学习】uni-indexed-list索引列表，只允许选择一个
weixin_38673922的博客
02-15 1579
uni-indexed-list索引列表，只允许选择一个。
uni-app微信小程序定制tabBar实现异形导航栏详解
在微信小程序开发中，特别是在uni-app框架中，实现自定义tabBar以创建中间图标突出显示的异形导航栏是一项常见的需求。通常，微信小程序的官方文档可能不提供直接的API来支持这样的自定义样式，但通过非标准方法可以...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值