更新记录

1.0.3（2024-06-21） 下载此版本

更新

1.0.2（2024-06-21） 下载此版本

更新

1.0.1（2024-06-21） 下载此版本

更新

查看更多

平台兼容性

Vue2 Vue3
× √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-uvue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

说明：

适用于uniapp x的索引列表，适配h5/安卓/苹果

使用：

示例1（对应左图，城市列表索引）：

<template>
    <scroll-view style="flex: 1;">
        <l-indexed-list :list="list" dataSortField="name" v-if="list.length > 0" @click="clickItem"></l-indexed-list>
    </scroll-view>
</template>

<script>
    export default {
        data() {
            return {
                list: [] as UTSJSONObject[]
            }
        },
        onLoad() {
            this.get()
        },
        methods: {
            get(){
                let data = [
                    { "name": "北京市", "first_letter": "B" },
                    { "name": "天津市", "first_letter": "T" },
                    { "name": "唐山市", "first_letter": "T" },
                    { "name": "石家庄市", "first_letter": "S" },
                    { "name": "保定市", "first_letter": "B" },
                    { "name": "邯郸市", "first_letter": "H" },
                    { "name": "邢台市", "first_letter": "X" },
                    { "name": "秦皇岛市", "first_letter": "Q" },
                    { "name": "沧州市", "first_letter": "C" },
                    { "name": "太原市", "first_letter": "T" },
                    { "name": "大同市", "first_letter": "D" },
                    { "name": "廊坊市", "first_letter": "L" },
                    { "name": "阳泉市", "first_letter": "Y" },
                    { "name": "张家口市", "first_letter": "Z" },
                    { "name": "衡水市", "first_letter": "H" },
                    { "name": "承德市", "first_letter": "C" },
                    { "name": "长治市", "first_letter": "C" },
                    { "name": "晋城市", "first_letter": "J" },
                    { "name": "抚顺市", "first_letter": "F" },
                    { "name": "本溪市", "first_letter": "B" },
                    { "name": "铁岭市", "first_letter": "T" },
                    { "name": "运城市", "first_letter": "Y" },
                    { "name": "临汾市", "first_letter": "L" },
                    { "name": "通辽市", "first_letter": "T" },
                    { "name": "巴彦淖尔市", "first_letter": "B" },
                    { "name": "沈阳市", "first_letter": "S" },
                    { "name": "兴安盟", "first_letter": "X" },
                    { "name": "营口市", "first_letter": "Y" },
                    { "name": "#号", "first_letter": "#" },
                    { "name": "111", "first_letter": "111" },
                    { "name": "555", "first_letter": "555" },
                    { "name": "333", "first_letter": "333" },
                    { "name": "999", "first_letter": "999" },
                    { "name": "ccc", "first_letter": "888" },
                    { "name": "aaa", "first_letter": "777" },
                    { "name": "bbb", "first_letter": "222" }
                ]
                let arr = [] as UTSJSONObject[]
                data.forEach(item=>{
                    arr.push({
                        letter: item['first_letter'],
                        data: item
                    })
                })
                this.list = arr
            },
            clickItem(item: UTSJSONObject){
                console.log(item)
            }
        }
    }
</script>

<style>

</style>

示例2（对应右图，自定义样式）：

<template>
    <scroll-view style="flex: 1;">
        <l-indexed-list :list="list" dataSortField="name" v-if="list.length > 0">
            <template v-slot="{ letter, data }">
                <view 
                    v-for="(item,index) in (data as UTSJSONObject[])" 
                    :key="index"
                    style="flex-direction: row;"
                    >
                    <view style="margin: 10px;">
                        <image :src="item['avatar']" mode="scaleToFill" style="width: 50px;height: 50px;border-radius: 5px;"></image>
                    </view>
                    <view style="margin-top: 10px;">
                        <view>
                            <text style="font-weight: 700;">{{ item['name'] }}</text>
                        </view>
                        <view style="margin-top: 10px;">
                            <text style="color: gray; font-size: 13px;">这里填写描述内容</text>
                        </view>
                    </view>
                </view>
            </template>
        </l-indexed-list>
    </scroll-view>
</template>

<script>
    export default {
        data() {
            return {
                list: [] as UTSJSONObject[]
            }
        },
        onLoad() {
            this.get()
        },
        methods: {
            get(){
                this.list = [
                    {letter: 'M', data: {name: '美女3', avatar: 'https://qiniu.oss.uniappx.al1ydb.com/static/face/1.png'}},
                    {letter: 'M', data: {name: '美女2', avatar: 'https://qiniu.oss.uniappx.al1ydb.com/static/face/2.png'}},
                    {letter: 'M', data: {name: '美女5', avatar: 'https://qiniu.oss.uniappx.al1ydb.com/static/face/1.png'}},
                    {letter: 'S', data: {name: '帅哥3', avatar: 'https://qiniu.oss.uniappx.al1ydb.com/static/face/2.png'}},
                    {letter: 'S', data: {name: '帅哥5', avatar: 'https://qiniu.oss.uniappx.al1ydb.com/static/face/1.png'}},
                    {letter: 'S', data: {name: '帅哥2', avatar: 'https://qiniu.oss.uniappx.al1ydb.com/static/face/2.png'}},
                    {letter: 'A', data: {name: 'a美女3', avatar: 'https://qiniu.oss.uniappx.al1ydb.com/static/face/1.png'}},
                    {letter: 'C', data: {name: 'c美女2', avatar: 'https://qiniu.oss.uniappx.al1ydb.com/static/face/2.png'}},
                    {letter: 'F', data: {name: 'f美女5', avatar: 'https://qiniu.oss.uniappx.al1ydb.com/static/face/1.png'}},
                    {letter: 'F', data: {name: 'f帅哥3', avatar: 'https://qiniu.oss.uniappx.al1ydb.com/static/face/2.png'}},
                    {letter: 'Z', data: {name: 'z帅哥5', avatar: 'https://qiniu.oss.uniappx.al1ydb.com/static/face/1.png'}},
                    {letter: 'Z', data: {name: 'z帅哥2', avatar: 'https://qiniu.oss.uniappx.al1ydb.com/static/face/2.png'}},
                    {letter: '3', data: {name: '3美女3', avatar: 'https://qiniu.oss.uniappx.al1ydb.com/static/face/1.png'}},
                    {letter: '4', data: {name: '4美女2', avatar: 'https://qiniu.oss.uniappx.al1ydb.com/static/face/2.png'}},
                    {letter: '1', data: {name: '1美女5', avatar: 'https://qiniu.oss.uniappx.al1ydb.com/static/face/1.png'}},
                    {letter: 'Y', data: {name: 'y帅哥3', avatar: 'https://qiniu.oss.uniappx.al1ydb.com/static/face/2.png'}},
                    {letter: 'Y', data: {name: 'y帅哥5', avatar: 'https://qiniu.oss.uniappx.al1ydb.com/static/face/1.png'}},
                    {letter: '-', data: {name: '-帅哥2', avatar: 'https://qiniu.oss.uniappx.al1ydb.com/static/face/2.png'}},
                ]
            },
            clickItem(item: UTSJSONObject){
                console.log(item)
            }
        }
    }
</script>

<style>

</style>

props

属性名 类型 默认值 差异 说明
list Array - - 列表
letterField String letter - 字母的字段，你自己的数据中哪个字段代表字母，如：示例1中的first_letter字段
dataField String data - data的字段，如：示例2中的list中对象的data属性，data内部的结构随意。
dataSortField String title - data的排序字段，组件会对data中的数据进行排序，按dataSortField填写的值的字段排序，如：示例2中，data按name字段排序，所以填写dataSortField="name"
letterTextStyle String - - 左侧字母文本的样式，每一项最前面的那个灰色背景的字母，如：A，B，C
dataTextStyle String - 非slot 左侧数据文本的样式，如：A下面的每一项，B下面的每一项。自定义插槽请忽略
rightIndexItemStyle String - - 右侧索引的每一项的样式，如：A，B，C，#
rightIndexItemCurrentStyle String - - 右侧索引的每一项的当前项文本的样式，如：当前选择A索引，此时A的样式
centerMaskStyle String - - 中间那个大的标识的样式，右侧选择索引时，中间会显示一个大大的字母，这里是指view
centerMarkTextStyle String - - 中间那个大的标识文本的样式，右侧选择索引时，中间会显示一个大大的字母，这里是指text
@click (item: UTSJSONObject) => void - 非slot 点击左侧数据的点击事件，如：A下面的每一项，B下面的每一项。自定义插槽请忽略，在自己的自定义插槽里写点击事件

插槽

名称 说明
default 左侧列表每个字母下面的内容，见示例2，返回letter: string和data: UTSJSONObject[]
top 替换右侧索引的TOP按钮的样式

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。

插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...