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

这篇具有很好参考价值的文章主要介绍了uniapp 字母索引列表插件(组件版) Ba-SortList。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简介(下载地址)

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

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

uniapp 常用原生插件大全


效果展示

uniapp 字母索引列表插件(组件版) Ba-SortList,uni-app,uni-app,原生插件,字母索引,通讯录,检索,列表

使用方法

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)从数据源获取详细信息文章来源地址https://www.toymoban.com/news/detail-822290.html

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

到了这里,关于uniapp 字母索引列表插件(组件版) Ba-SortList的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【uniapp】省市区下拉列表组件

    2024年04月11日
    浏览(47)
  • uniapp组件-ui-list列表

    目录 一、基本用法 二、显示图标或图片 三、右侧显示 switch/badge 四、使用插槽 官方示例:https://ext.dcloud.net.cn/plugin?id=24 列表组件可以在其中使用图标、略缩图或放置任何你想放的元素,使用场景如:导航菜单、列表、设置中心排版等 基于uni-list的聊天列表组件:https://blog

    2024年02月12日
    浏览(39)
  • uniapp 使用组件 uni-list 实现聊天列表功能

    如何使用 uniapp 的组件实现聊天列表的功能呢,翻阅了半天文档,终于找到一个实用的方法,下面是具体的步骤  1、首先需要下载对应的插件 去uniapp的官方文档进行下载(uni-ui - DCloud 插件市场),这里直接下载插件并导入到HBuilderx 中就可以了。  2、接下来就可以直接进行使

    2024年02月09日
    浏览(47)
  • uniapp 悬浮窗-任意界面 Ba-FloatWinWeb

    简介(下载地址) Ba-FloatWinWeb 是一款支持自定义任意界面的悬浮窗插件。采用webview方式,同时支持本地、网络地址;自带几种界面,可直接使用。 支持显示、更新、隐藏 支持记录显示位置 支持拖动 支持监听点击事件 支持自动申请、判断悬浮窗权限 支持手动申请、判断悬

    2024年02月07日
    浏览(38)
  • uniapp 画中画悬浮窗(视频) Ba-VideoPip

    简介(下载地址) Ba-VideoPip 是一款画中画方式的视频悬浮窗插件。支持点播、直播;支持官方、三方播放器无缝切换;支持动态刷新(如切换视频或进度)。 支持点播、直播 支持官方、三方播放器无缝切换 支持动态刷新(如切换视频或进度) 支持检测是否支持画中画 支持

    2023年04月18日
    浏览(36)
  • uniapp 抖音授权登录、发布、分享 Ba-Aweme

    简介(下载地址) Ba-Aweme 是一个集成抖音的uniapp插件,支持抖音授权登录,发布图片、视频,分享到联系人群组,直接拍摄等。自带选择图片和选择视频方法。 注意: 使用前,先到抖音开放平台,申请clientKey 截图展示 使用方法 在 script 中引入组件 在 script 中调用(示例参

    2024年02月02日
    浏览(32)
  • uniapp使用微信小程序提供的原生插件(组件)

    小程序交易保障标展示组件 为例 参考uniapp加载插件、微信小程序加载插件 1. manifest.json: 先打开manifest.json文件,然后我们找到\\\"mp-weixin\\\",引入需要使用的插件 2. pages.json 打开pages.json文件,然后再对应的页面配置处添加东西 3.页面使用

    2024年02月11日
    浏览(65)
  • uniapp 安卓保活套装(通用保活、常驻通知、电池优化、自启管理等) Ba-KeepAliveSuit

    简介(下载地址) Ba-KeepAliveSuit 是一款android原生保活套装插件,支持市面上大部分机型,Android4.4到Android13.0 (**注意:**不保证支持所有机型和场景,建议先试用)。 可解决定位、推送、websocket、定时任务、蓝牙、聊天等保活问题。 Ba-KeepAliveSuit在Ba-KeepAlive的基础上,新增了

    2024年02月09日
    浏览(37)
  • Android UI--开源项目IndexableListView(字母索引)

    setContentView(R.layout.main); // 初始化一些数据 mItems = new ArrayList(); mItems.add(“Diary of a Wimpy Kid 6: Cabin Fever”); mItems.add(“Steve Jobs”); mItems.add(“Inheritance (The Inheritance Cycle)”); mItems.add(“11/22/63: A Novel”); mItems.add(“The Hunger Games”); mItems.add(“The LEGO Ideas Book”); mItems.add(“Explosive Ei

    2024年04月23日
    浏览(31)
  • uniapp实战仿写网易云音乐(三)—视频页面(scroll-view组件实现横线滑动,mescroll-uni实现视频列表,向下滑动刷新当前页面)

    接着上篇文章继续完成剩下的部分,本篇文章是完成第二个页面——视频页面的部分,视频还是没有做播放的效果,主要是做展示效果。下面附上两篇文章链接,没看过的同学可以回头看看: uniapp实战仿写网易云音乐(一)—底部工具栏以及首页轮播图swiper的实现 uniapp实战仿写

    2023年04月25日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包