uniapp 字母索引列表插件(组件版) Ba-SortList

简介(下载地址)

Ba-SortList 是一款字母索引列表组件版插件,可自定义样式,支持首字母字母检索、首字检索、搜索等等;支持点击事件。

  • 支持首字母字母检索
  • 支持首字检索
  • 支持搜索
  • 支持点击事件
  • 支持长按事件
  • 支持在uniapp界面中集成,直接引用组件使用(nvue)

uniapp 常用原生插件大全


效果展示

请添加图片描述

使用方法

template 中使用组件

		<Ba-SortList ref="sortList" class="sort-list" :load="loadData" @onItemClick="onItemClick"@onItemLongClick="onItemLongClick"></Ba-SortList>

script 中调用

<script>import sortData from '../../data/sort-data.js';export default {data() {return {loadData: { //配置list: sortData.data,//数据源,注意必须有name参数(参照“数据源list示例”)// lettersHeight: 28, //首字母高度,默认28// lettersSize: 14, //首字母字体大小,默认14// lettersColor: "#959692", //首字母字体颜色// lettersBgColor: "#F7F6F9", //首字母字体颜色// searchHint: "测试搜索", //搜索提示文字// searchHintColor: "#00FF00", //搜索提示文字颜色// searchTextColor: "#FF0000", //搜索输入文字颜色// searchTextSize: 11, //搜索文字大小// searchInputColor: "#959692", //搜索框颜色// searchBgColor: "#00000000", //搜索栏背景色// sidebarBgNormal: "#F7F6F9", //侧边索引背景颜色(默认)// sidebarBgSearch: "#959692", //侧边索引背景颜色(检索时)// sidebarTextColorNormal: "#0000FF", //侧边索引字体颜色(默认)// sidebarTextColorSearch: "#FF0000", //侧边索引字体颜色(检索时)// sidebarTextColorPressed: "#00FF00", //侧边索引字体颜色(检索并且按住该字母时)//sidebarCellSpacing: 1, //侧边索引字体间距,默认8//sidebarHeight: 400, //侧边索引高度,默认铺满// sidebarWidth: 60, //侧边索引宽度,默认30// dialogBg: "#FF0000", //字母弹窗背景颜色// dialogSize: 40, //字母弹窗大小,默认80// dialogTextColor: "#000000", //字母弹窗字体颜色// dialogTextSize: 15, //字母弹窗字体大小,默认30// firstwordBg: "#FF0000", //首文字项背景色// firstwordSize: 60, //首文字项大小,默认35// firstwordTextColor: "#000000", //首文字项字体颜色// firstwordTextSize: 25, //首文字项字体大小,默认16// itemBg: "#000000", //数据项背景颜色// itemHeight: 80, //数据项高度,默认44// itemTextColor: "#FF0000", //数据项字体颜色// itemTextSize: 30, //数据项字体大小,默认15//showFirstWords: true, //是否显示首文字检索,默认false//showSearchView: true, //是否显示搜索框,默认true},msgList: []}},methods: {onItemClick(e) { //点击事件let msg = JSON.stringify(e.detail.item);console.log("onItemClick:" + msg);uni.showToast({title: msg,icon: 'none'})//this.msgList.unshift(JSON.stringify(e.detail))},onItemLongClick(e) { //长按事件let msg = JSON.stringify(e.detail.item);console.log("onItemLongClick:" + msg);uni.showToast({title: msg,icon: 'none'})//this.msgList.unshift(JSON.stringify(e.detail))},}}
</script>

数据源list示例

[{"name": "上海","desc": "描述信息"},{"name": "北京","desc": "描述信息"},{"name": "杭州","desc": "描述信息"},{"name": "广州","desc": "描述信息"}
]

点击和长按事件

返回下标,可根据下标(position)从数据源获取详细信息

属性名说明
position选择数据的下标
name名称
letter名称的首字母
spell名称的拼音

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/239614.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

八:分布式锁

1、为什么要使用分布式锁 锁是多线程代码中的概念&#xff0c;只有多任务访问同一个互斥的共享资源时才需要锁。单机应用开发时一般使用synchronized或lock。多线程的运行都是在同一个JVM之下。应用是分布式集群&#xff0c;属于多JVM的工作环境&#xff0c;JVM之间已经无法通过…

STM32 定时器输入捕获2——捕获高电平时长

由上图我们可以知道&#xff0c;高电平时间t2-t1。在代码中&#xff0c;可以记录此时t1的时间然后再记录t2的时间&#xff0c;t2-t1&#xff0c;就是我们所想要的答案。 但是&#xff0c;还有更简单一点点的&#xff0c;当到达t1的时候&#xff0c;我们把定时器清零&#xff0c…

MIT_线性代数笔记:第 26 讲 复矩阵;快速傅里叶变换

目录 复向量 Complex vectors复矩阵 Complex matrices傅里叶变换 Fourier transform快速傅里叶变换 Fast Fourier transform 实矩阵也可能有复特征值&#xff0c;因此无法避免在矩阵运算中碰到复数&#xff0c;本讲学习处理复数矩阵和复向量。 最重要的复矩阵是傅里叶矩阵&…

Linux CentOS 7.6安装JDK详细保姆级教程

一、检查系统是否自带jdk java --version 如果有的话&#xff0c;找到对应的文件删除 第一步&#xff1a;先查看Linux自带的JDK有几个&#xff0c;用命令&#xff1a; rpm -qa | grep -i java第二步:删除JDK&#xff0c;执行命令&#xff1a; rpm -qa | grep -i java | xarg…

【Nuxt3】Nuxt3脚手架nuxi安装项目和项目目录介绍

简言 最近学了Nuxt3,并使用它创建了自己的小网站。记录下学习到的nuxt3内容。 Nuxt3官网 Nuxt 是一个免费的开源框架&#xff0c;可通过直观、可扩展的方式使用 Vue.js 创建类型安全、高性能、生产级的全栈 Web 应用程序和网站。 支持SSR、SPA、建立静态网站&#xff0c;也可以…

【大数据】Flink 详解(九):SQL 篇 Ⅱ

《Flink 详解》系列&#xff08;已完结&#xff09;&#xff0c;共包含以下 10 10 10 篇文章&#xff1a; 【大数据】Flink 详解&#xff08;一&#xff09;&#xff1a;基础篇【大数据】Flink 详解&#xff08;二&#xff09;&#xff1a;核心篇 Ⅰ【大数据】Flink 详解&…

若依在表格中如何将字典的键值转为中文

文章目录 一、需求&#xff1a;二、问题解决步骤1、给需要转换的列绑定formatter属性2、获取字典项3、编写formatter属性绑定的方法 一、需求&#xff1a; 后端有时候返回的是字典的键值&#xff0c;在前端展示时需要转成中文值 后端返回的是dictValue&#xff0c;现在要转换…

QT -狗狗管理工具

QT -狗狗管理工具 一、演示效果二、UML三、关键代码四、程序链接 一、演示效果 二、UML 三、关键代码 #include <QFrame> #include <QHBoxLayout> #include <QVBoxLayout> #include <QLabel> #include <QSizePolicy> #include <QDialog> …

谷歌aab包在Android 14闪退而apk没问题(targetsdk 34)

问题原因 Unity应用(target SDK 34)上线到GooglePlay&#xff0c;有用户反馈fold5设备上&#xff08;Android14系统&#xff09;疯狂闪退&#xff0c;经测试&#xff0c;在小米手机Android14系统的版本复现成功了&#xff0c;奇怪的是apk直接安装没问题&#xff0c;而打包成aa…

为什么使用双token实现无感刷新用户认证?

单token机制 认证机制&#xff1a;对与单token的认证机制在我们项目中仅使用一个Access Token的访问令牌进行用户身份认证和授权的方案处理。 不足之处&#xff1a; 安全性较低(因为只有一个token在客户端和服务器端之间进行传递&#xff0c;一目Acess Token被截获或者被泄露…

MetaGPT前期准备与快速上手

大家好&#xff0c;MetaGPT 是基于大型语言模型&#xff08;LLMs&#xff09;的多智能体协作框架&#xff0c;GitHub star数量已经达到31.3k。 接下来我们聊一下快速上手 这里写目录标题 一、环境搭建1.python 环境2. MetaGpt 下载 二、MetaGPT配置1.调用 ChatGPT API 服务2.简…

Python武器库开发-武器库篇之Whois信息收集模块化(四十五)

Python武器库开发-武器库篇之Whois信息收集模块化(四十五) 我们在进行渗透的时候&#xff0c;需要进行全面的信息收集&#xff0c;除了主动信息收集之外&#xff0c;我们还经常会进行被动信息收集&#xff0c;Whois信息收集就是其中的一种,我们可以利用一些网站进行Whois信息收…

k8s 存储卷和pvc,pv

存储卷---数据卷 容器内的目录和宿主机的目录进行挂载。 容器在系统上的生命周期是短暂的&#xff0c;deletek8s用控制器创建的pod&#xff0c;delete相当于重启&#xff0c;容器的状态也会回复到初始状态。 一旦回到初始状态&#xff0c;所有的后天编辑的文件的都会消失。 …

rime中州韵小狼毫 LaTex输入法配置

教程目录&#xff1a;rime中州韵小狼毫须鼠管安装配置教程 保姆级教程 100增强功能配置教程 本文的分享一种在rime中州韵小狼毫须鼠管输入法中配置LaTex输入方案的方法&#xff0c;并不完美&#xff0c;仅供参考。 先睹为快 LaTex输入方案可以快捷的在公式模式下输入一些基础…

C#编程-使用事件

使用事件 事件是一个动作或发生的事情,例如:鼠标点击、按键、鼠标移动或系统产生的通知。应用程序可以在事件发生的时候做出响应。通知的一个示例是中断。事件是对象发生的消息以表示事件的发生。事件是进程内通信的有效方法。它们对对象时有用的,因为它们标识了单个状态改…

C#--核心

CSharp核心知识点学习 学习内容有&#xff1a; 绪论&#xff1a;面向对象的概念 Lesson1&#xff1a;类和对象 练习&#xff1a; Lesson2&#xff1a;封装--成员变量和访问修饰符 练习: Lesson3:封装--成员方法 Lesson4&#xff1a;封装--构造函数和析构函数 知识点四 垃圾回收…

OpenCV——图像按位运算

目录 一、算法概述1、逻辑运算2、函数解析3、用途 二、代码实现三、结果展示 OpenCV——图像按位运算由CSDN点云侠原创&#xff0c;爬虫自重。如果你不是在点云侠的博客中看到该文章&#xff0c;那么此处便是不要脸的爬虫。 一、算法概述 1、逻辑运算 OpenCV4 针对两个图像之…

查看服务器的yum 源

1、cd /etc/yum.repos.d 2、编辑 CentOS-Stream-Sources.repo 3、 查看里面的yum源地址 4、更新yum源&#xff0c;执行下面指令 yum clean all # 清除系统所有的yum缓存 yum makeacache # 生成新的yum缓存 yum repolist

SQL-用户管理与用户权限

&#x1f389;欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克&#x1f379; ✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;重拾MySQL &#x1f379;文章作者技术和水平很有限&#xff0c;如果文中出现错误&am…

Qt/QML编程之路:Grid、GridLayout、GridView、Repeater(33)

GRID网格用处非常大,不仅在excel中,在GUI中,也是非常重要的一种控件。 Grid 网格是一种以网格形式定位其子项的类型。网格创建一个足够大的单元格网格,以容纳其所有子项,并将这些项从左到右、从上到下放置在单元格中。每个项目都位于其单元格的左上角,位置为(0,0)。…