@yrobot/react-mobile-indexlist NPM

@yrobot/react-mobile-indexlist

特性

根据传入数据自动生成字母索引
点击索引自动滚到对应行
开放 onRow 钩子，用户可以自定义行展示
开放 onTop、onBottom，用户可以在list顶部和底部加入其他内容（提示、全选、广告、etc）
用户可以自如的在 IndexList 进行选中状态的管理

查看 demo

npm.io
注意使用浏览器的手机模式查看DEMO

使用

安装@yrobot/react-mobile-indexlist

yarn add @yrobot/react-mobile-indexlist

引入组件并使用

import IndexList from '@yrobot/react-mobile-indexlist'
import '@yrobot/react-mobile-indexlist/lib/index.css'

const mockData = [
	'赵',
	'钱',
	'孙',
	'李',
	'周',
	'吴',
	'郑',
	'王',
	'冯',
	'陈',
	'褚',
	'卫',
	'蒋',
	'沈',
	'韩',
	'杨',
	'朱',
	'秦',
	'尤',
	'许',
	'何',
	'吕',
	'施',
	'张',
	'孔',
	'曹',
	'严',
	'卫',
	'蒋',
	'沈',
	'韩',
	'杨',
	'朱',
	'秦',
	'尤',
	'许',
	'何',
	'吕',
	'施',
	'张',
	'孔',
	'曹',
	'严',
	'华',
].map((v, i) => ({
	name: v + i + 'xx',
	id: i,
}))

const indexKey = 'name'

<IndexList
	// WXList={WXList} // 小程序使用时需要配合WXList(需要的话可以提issues)
	list={mockData} // 传入数据列表 [object]
	indexKey={indexKey} // 数据对象中需要排序的字段索引，mock数据里是name字段
	onChange={(v) => { // 用户点击某一行的回调, 返回此行的数据对象
		console.log(v)
	}}
	caseSensitive={false} // 大小写敏感，默认不敏感
	onTop={() => ( // 在IndexList列表内的顶部加入一些jsx : ()=>jsx
		<div className="index-list-line-holder">
			<div className="index-list-item-name">全部（默认）</div>
			<div className="item-select-status-box">
				<div
					className={'select-status' + (selectAll ? ' true' : ' false')}
				></div>
			</div>
		</div>
	)}
	onBottom={() => ( // 在IndexList列表内的底部加入一些jsx : ()=>jsx
		<div className="index-list-line-holder">
			<div className="index-list-item-name">onBottom</div>
			<div className="item-select-status-box"></div>
		</div>
	)}
	onRow={(record, index) => ( // 每一行数据的渲染方式，默认直接展示indexKey的值： (每一行的数据对象, 数据在列表的索引)=> jsx
		<div className="index-list-line-holder">
			<div className="index-list-item-name">{record[indexKey]}</div>
			<div className="item-select-status-box">
				<div
					className={'select-status' + (index % 2 ? ' false' : ' true')}
				></div>
			</div>
		</div>
	)}
/>

大小写敏感：
属性：caseSensitive : boolean
效果：
npm.io