init

.gitignore

@@ -0,0 +1,6 @@
+node_modules/
+.project
+unpackage/
+.DS_Store
+.hbuilderx/
+package-lock.json

App.vue

@@ -0,0 +1,17 @@
+<script>
+	export default {
+		onLaunch: function() {
+			console.log('App Launch')
+		},
+		onShow: function() {
+			console.log('App Show')
+		},
+		onHide: function() {
+			console.log('App Hide')
+		}
+	}
+</script>
+
+<style>
+	/*每个页面公共css */
+</style>

api/login.js

@@ -0,0 +1,89 @@
+import request from '@/common/request.js'
+import config from '@/config.js'
+import {getAppLocal} from './app.js'
+import store from "@/store"
+
+//发送验证码
+export const sendYzm = async  (data) => {
+	let r = await request({
+		url: config.server + '/school/api/sendSms',
+		method: 'POST',
+		encryption:true,
+		data: data
+	})
+	uni.showToast({
+		title: '验证码已经发送',
+		icon: "none",
+		duration: 2000
+	})
+}
+//验证验证码是否正确
+export const checkYzm = async  (data) => {
+	let r = await request({
+		url: config.server + '/school/api/checkCode',
+		method: 'POST',
+		encryption:true,
+		data: data
+	})
+	//1验证成功 0 未成功
+	return r
+}
+//注册用户
+export const register = async  (data) => {
+	let r = await request({
+		url: config.server + '/school/api/register',
+		method: 'POST',
+		encryption:true,
+		data: data
+	})
+	//1验证成功 0 未成功
+	return r
+}
+
+
+//用户登录
+export const login = async  (data) => {
+	let user = await request({
+		url: config.server + '/school/api/login',
+		method: 'POST',
+		encryption:true,
+		data: data
+	})
+	//登录成功初始化数据
+	
+	user.login = data
+	
+	//保存用户登录信息
+	uni.setStorage({
+	    key: 'user',
+	    data: user
+	});
+	
+
+	
+	
+	//保存用户登录信息
+	console.log('[用户信息]',uni.getStorageSync('user'))
+	
+	return true
+}
+
+//绑定用户身份
+export const bindIdentity = async  (data) => {
+	let r = await request({
+		url: config.server + '/school/api/identity/bind',
+		method: 'POST',
+		encryption:false,
+		data: data
+	})
+	//1验证成功 0 未成功
+	return r
+}
+
+//登出
+export const logout = async  (data) => {
+	uni.clearStorageSync()
+	uni.reLaunch({
+		url: '/pages/login/pages/login.nvue'
+	})
+}

common/request.js

@@ -0,0 +1,89 @@
+import config from '../config.js'
+import {login} from '@/api/login.js'
+//请求
+function request (req) {
+	
+	let data = req.data
+	const method = req.method
+	const url = req.url
+	let loading = false
+	if (req.data.loading){
+		loading = data.loading
+		delete data.loading
+	}
+	
+	let header = {
+		'Content-Type': 'application/json',
+		'timestamp': Date.parse(new Date()),
+		// 'token': uni.getStorageSync('user').access_token,
+		'Authorization':'Bearer ' + uni.getStorageSync('user').access_token
+	}
+	if (loading){
+		uni.hideLoading()
+		uni.showLoading({
+		    title: '请求中',
+			mask:true
+		})
+	}
+	return new Promise((resolve, reject) => {
+		console.log('REQ ==>', url)
+		console.log( data )
+		uni.request({
+			url: url, 
+			data: data,
+			header: header,
+			method: method.toUpperCase(),
+			timeout:1000 * 60 * 3, //超时三分钟
+			success: async (res) => {
+				uni.hideLoading()
+				console.log("RES <==", url)
+				console.log( res )
+				
+				
+				if (res.statusCode == 200 && res.data.code == 200){
+					resolve(res.data.data)
+				}else if (res.statusCode == 401){
+					//处理token验证出错
+					console.log('Token过期')
+					if (!uni.getStorageSync('user')){
+						//其他设备登录了
+						uni.reLaunch({
+							url: '/pages/login/pages/login'
+						});
+					}else{
+						//token续租
+						let r = await login(uni.getStorageSync('user').login)
+						let result = await request (req)
+					}
+				}else{
+					console.error(res.data.msg)
+					if (res.data.msg == '登录状态已过期'){
+						uni.reLaunch({
+							url: '/pages/login/pages/login'
+						})
+					}
+					uni.showToast({
+					    title: res.data.msg,
+						icon: "none",
+						position:"bottom",
+					    duration: 3000
+					})
+					reject(false)
+				}
+			},
+			fail: (err) => {
+				uni.hideLoading()	
+				uni.showToast({
+				    title: '服务器休息中，请稍后再试',
+					icon: "none",
+					position:"center",
+				    duration: 3000
+				});
+				console.error(url, err)
+				reject(err)
+			}
+		});
+	})
+}
+
+export default request

config.js

@@ -0,0 +1,6 @@
+const build = {
+	"service" : "https://www.baidu.com"
+}
+
+
+export default build

index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script>
+      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
+        CSS.supports('top: constant(a)'))
+      document.write(
+        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
+        (coverSupport ? ', viewport-fit=cover' : '') + '" />')
+    </script>
+    <title></title>
+    <!--preload-links-->
+    <!--app-context-->
+  </head>
+  <body>
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>

main.js

@@ -0,0 +1,22 @@
+import App from './App'
+
+// #ifndef VUE3
+import Vue from 'vue'
+import './uni.promisify.adaptor'
+Vue.config.productionTip = false
+App.mpType = 'app'
+const app = new Vue({
+  ...App
+})
+app.$mount()
+// #endif
+
+// #ifdef VUE3
+import { createSSRApp } from 'vue'
+export function createApp() {
+  const app = createSSRApp(App)
+  return {
+    app
+  }
+}
+// #endif

manifest.json

@@ -0,0 +1,72 @@
+{
+    "name" : "yl",
+    "appid" : "__UNI__EBBEE51",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : "100",
+    "transformPx" : false,
+    /* 5+App特有相关 */
+    "app-plus" : {
+        "usingComponents" : true,
+        "nvueStyleCompiler" : "uni-app",
+        "compilerVersion" : 3,
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        /* 模块配置 */
+        "modules" : {},
+        /* 应用发布信息 */
+        "distribute" : {
+            /* android打包配置 */
+            "android" : {
+                "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ]
+            },
+            /* ios打包配置 */
+            "ios" : {},
+            /* SDK配置 */
+            "sdkConfigs" : {}
+        }
+    },
+    /* 快应用特有相关 */
+    "quickapp" : {},
+    /* 小程序特有相关 */
+    "mp-weixin" : {
+        "appid" : "",
+        "setting" : {
+            "urlCheck" : false
+        },
+        "usingComponents" : true
+    },
+    "mp-alipay" : {
+        "usingComponents" : true
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    },
+    "uniStatistics" : {
+        "enable" : false
+    },
+    "vueVersion" : "3"
+}

pages.json

@@ -0,0 +1,51 @@
+{
+
+	"tabBar": {
+		"iconfontSrc": "static/font/Alibaba-PuHuiTi-Regular.ttf",
+		"list": [{
+				"pagePath": "pages/index/index",
+				"text": "首页",
+				"iconfont": {
+					"text": "\ue102",
+					"selectedText": "\ue103",
+					"fontSize": "17px",
+					"color": "#000000",
+					"selectedColor": "#0000ff"
+				}
+			},
+			{
+				"pagePath": "pages/my/index",
+				"text": "我的",
+				"iconfont": {
+					"text": "\ue102",
+					"selectedText": "\ue103",
+					"fontSize": "30px",
+					"color": "#000000",
+					"selectedColor": "#0000ff"
+				}
+			}
+		]
+	},
+
+	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": "首页"
+			}
+		},
+		{
+			"path": "pages/my/index",
+			"style": {
+				"navigationBarTitleText": "个人中心"
+			}
+		}
+	],
+	"globalStyle": {
+		"navigationBarTextStyle": "black",
+		"navigationBarTitleText": "uni-app",
+		"navigationBarBackgroundColor": "#F8F8F8",
+		"backgroundColor": "#F8F8F8"
+	},
+	"uniIdRouter": {}
+}

pages/index/index.vue

@@ -0,0 +1,148 @@
+<template>
+    <view class="page-main">
+        <next-indexed-xlist :dataList="dataList" :showAvatar="true" @itemclick="itemclick">
+            <!--这是默认插槽,额外添加部分-->
+            <!--    <view class="content-block">
+                <view class="title"><text>历史记录:</text></view>
+                <view class="btn"><text>朝阳区</text></view>
+                <view class="btn"><text>东城区</text></view>
+                <view class="btn"><text>海淀区</text></view>
+            </view> -->
+        </next-indexed-xlist>
+		
+		<button class="floating-button" @click="handleClick">新增</button>
+    </view>
+</template>
+
+<script setup>
+	import { ref } from "vue";
+	const dataList = ref([{
+	        id: '1',
+	        name: '刘**',
+	        phone: '181****5576',
+	        img: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300'
+	    }, {
+	        id: '2',
+	        name: '王**',
+	        phone: '181****5576',
+	        img: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300'
+	    }, {
+	        id: '3',
+	        name: '黎**',
+	        phone: '181****5576',
+	        img: 'https://img2.baidu.com/it/u=453253244,3693084626&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+	    }, {
+	        id: '4',
+	        name: '王**',
+	        phone: '181****5576',
+	        img: 'https://img2.baidu.com/it/u=453253244,3693084626&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+	    }, {
+	        id: '5',
+	        name: '马**',
+	        phone: '181****5576',
+	        img: 'https://c-ssl.dtstatic.com/uploads/item/202005/17/20200517225139_Awrwa.thumb.1000_0.jpeg'
+	    }, {
+	        id: '6',
+	        name: '韩**',
+	        phone: '181****5576',
+	        img: 'https://c-ssl.dtstatic.com/uploads/item/202005/17/20200517225139_Awrwa.thumb.1000_0.jpeg'
+	    }, {
+	        id: '7',
+	        name: '张**',
+	        phone: '181****5576',
+	        img: 'https://img0.baidu.com/it/u=2337762009,1252339875&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+	    }, {
+	        id: '8',
+	        name: '杨**',
+	        phone: '181****5576',
+	        img: 'https://img0.baidu.com/it/u=2337762009,1252339875&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+	    }, {
+	        id: '9',
+	        name: '张**',
+	        phone: '18198045576',
+	        img: 'https://img2.baidu.com/it/u=2638426337,2608406797&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+	    }, {
+	        id: '10',
+	        name: '李**',
+	        phone: '181****1176',
+	        img: 'https://img2.baidu.com/it/u=2638426337,2608406797&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+	    }, {
+	        id: '11',
+	        name: '陈**',
+	        phone: '153****5576',
+	        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201412%2F25%2F20141225133106_zjyfa.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687677419&t=3464ddbfcb8ad0291ed5f38374f23869'
+	    }, {
+	        id: '12',
+	        name: '李**',
+	        phone: '131****5576',
+	        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201412%2F25%2F20141225133106_zjyfa.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687677419&t=3464ddbfcb8ad0291ed5f38374f23869'
+	    }, {
+	        id: '13',
+	        name: '唐**',
+	        phone: '181****3476',
+	        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201412%2F25%2F20141225133106_zjyfa.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687677419&t=3464ddbfcb8ad0291ed5f38374f23869'
+	    }, {
+	        id: '14',
+	        name: '刘**',
+	        phone: '181****5576',
+	        img: 'https://img2.baidu.com/it/u=453253244,3693084626&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+	    }, {
+	        id: '15',
+	        name: '秦**',
+	        phone: '181****5576',
+	        img: 'https://img2.baidu.com/it/u=453253244,3693084626&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+	    }, {
+	        id: '16',
+	        name: '朱**',
+	        phone: '181****5576',
+	        img: 'https://c-ssl.dtstatic.com/uploads/item/202005/17/20200517225139_Awrwa.thumb.1000_0.jpeg'
+	    }])
+
+
+function itemclick(e) {
+        console.log('点击列表回调：', e)
+    }
+	
+	function handleClick(e){
+		
+	}
+
+</script>
+
+<style lang="scss">
+	 .content-block {
+	        display: flex;
+	        flex-direction: row;
+	        justify-content: flex-start;
+	        background-color: #fff;
+	        .title {
+	            color: #333;
+	            padding: 20rpx;
+	            margin-right: 20rpx;
+	            display: flex;
+	            flex-direction: column;
+	            justify-content: center;
+	        }
+	        .btn {
+	            color: #ccc;
+	            padding: 10rpx;
+	            border: 1rpx solid #ccc;
+	            border-radius: 10rpx;
+	            margin: 20rpx 10rpx;
+	            font-size: 28rpx;
+	            display: flex;
+	            flex-direction: column;
+	            justify-content: center;
+	
+	        }
+	    }
+		
+.floating-button{
+ position: fixed;
+ bottom: 20px;
+ width: 80%;
+ margin-left: 10%;
+ border-radius: 23px;
+ background-color: #FFD663;
+} 
+</style>

pages/my/index.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

uni.promisify.adaptor.js

@@ -0,0 +1,10 @@
+uni.addInterceptor({
+  returnValue (res) {
+    if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
+      return res;
+    }
+    return new Promise((resolve, reject) => {
+      res.then((res) => res[0] ? reject(res[0]) : resolve(res[1]));
+    });
+  },
+});

uni.scss

@@ -0,0 +1,76 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+
+/* 颜色变量 */
+
+/* 行为相关颜色 */
+$uni-color-primary: #007aff;
+$uni-color-success: #4cd964;
+$uni-color-warning: #f0ad4e;
+$uni-color-error: #dd524d;
+
+/* 文字基本颜色 */
+$uni-text-color:#333;//基本色
+$uni-text-color-inverse:#fff;//反色
+$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
+$uni-text-color-placeholder: #808080;
+$uni-text-color-disable:#c0c0c0;
+
+/* 背景颜色 */
+$uni-bg-color:#ffffff;
+$uni-bg-color-grey:#f8f8f8;
+$uni-bg-color-hover:#f1f1f1;//点击状态颜色
+$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+
+/* 边框颜色 */
+$uni-border-color:#c8c7cc;
+
+/* 尺寸变量 */
+
+/* 文字尺寸 */
+$uni-font-size-sm:12px;
+$uni-font-size-base:14px;
+$uni-font-size-lg:16;
+
+/* 图片尺寸 */
+$uni-img-size-sm:20px;
+$uni-img-size-base:26px;
+$uni-img-size-lg:40px;
+
+/* Border Radius */
+$uni-border-radius-sm: 2px;
+$uni-border-radius-base: 3px;
+$uni-border-radius-lg: 6px;
+$uni-border-radius-circle: 50%;
+
+/* 水平间距 */
+$uni-spacing-row-sm: 5px;
+$uni-spacing-row-base: 10px;
+$uni-spacing-row-lg: 15px;
+
+/* 垂直间距 */
+$uni-spacing-col-sm: 4px;
+$uni-spacing-col-base: 8px;
+$uni-spacing-col-lg: 12px;
+
+/* 透明度 */
+$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
+
+/* 文章场景相关 */
+$uni-color-title: #2C405A; // 文章标题颜色
+$uni-font-size-title:20px;
+$uni-color-subtitle: #555555; // 二级标题颜色
+$uni-font-size-subtitle:26px;
+$uni-color-paragraph: #3F536E; // 文章段落颜色
+$uni-font-size-paragraph:15px;

uni_modules/next-indexed-xlist/changelog.md

@@ -0,0 +1,24 @@
+## 1.1.1（2023-10-26）
+更新说明
+## 1.1.0（2023-09-18）
+修复异步复赋值属性dataList的bug
+## 1.0.9（2023-09-14）
+增加说明
+## 1.0.8（2023-09-14）
+增加支持双向联动
+## 1.0.7（2023-06-30）
+默认开启双向联动功能
+## 1.0.6（2023-06-30）
+增加双向联动功能
+## 1.0.5（2023-06-10）
+更新说明
+## 1.0.4（2023-06-10）
+增加插件依赖说明
+## 1.0.3（2023-06-06）
+修改说明文件
+## 1.0.2（2023-06-05）
+更新说明文件
+## 1.0.1（2023-06-03）
+更新说明
+## 1.0.0（2023-06-03）
+初始化项目

uni_modules/next-indexed-xlist/components/next-indexed-xlist/js-pinyin/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

uni_modules/next-indexed-xlist/components/next-indexed-xlist/next-indexed-xlist.vue

@@ -0,0 +1,409 @@
+<template>
+	<view class="next-list">
+		<view class="next-search">
+			<image class="next-search-img" :src="nextSearchImgSrc"></image>
+			<input class="next-input" @input="search" v-model="searchStr" placeholder="请输入搜索信息" maxlength="50"
+				placeholder-class="next-placeholder" />
+		</view>
+		<scroll-view @scroll="scrollCallback" class="next-scroll-left" scroll-y="true" :scroll-with-animation="true"
+			:scroll-into-view="scrollIntoView">
+			<view id="TOP"><slot></slot></view>
+			<view class="left-list" v-for="(item,index) of scrollLeftObj" :key="index" :id="index!='#'?index:'BOTTOM'">
+				<view :id="`item${index}`" class="left-item-title" v-if="item && item.length">{{index}}</view>
+				<view class="left-item-card" v-for="(mess,inx) in item" @click.stop="chooseItem(mess)">
+					<view v-if="showAvatar">
+						<image :style="'border-radius:'+radius" class="left-item-card-img img-info" :src="mess[imgKey]"
+							v-if="mess[imgKey]" @click.stop="preview(mess[imgKey])"></image>
+						<view :style="'border-radius:'+radius" class="left-item-card-img" v-else>
+							{{mess[nameKey] && mess[nameKey].slice(0,1) || ''}}
+						</view>
+					</view>	
+					<view class="left-item-card-info"
+						:style="inx<item.length-1?'border-bottom: solid #F4F4F4 1rpx;':''">
+						<view class="left-item-card-name">{{mess[nameKey] || ''}}</view>
+						<view class="left-item-card-phone" v-if="mess[phoneKey]">{{mess[phoneKey]}}</view>
+					</view>
+				</view>
+			</view>
+			<view class="no-data" v-if="!hasData">
+				<image class="no-data-img" :src="noDataImgSrc"></image>
+				<view class="no-data-name">暂无数据</view>
+			</view>
+		</scroll-view>
+		<view class="next-scroll-right" v-if="hasData">
+			<image class="next-scroll-right-top" :src="nextScrollRightTopSrc" @click.stop="scrollTop"></image>
+			<view :class="{'next-scroll-right-name':true,'next-scroll-right-select':item==scrollIntoViewCopy}"
+				v-for="(item,index) in scrollRightList" :key="index" @click.stop="chooseType(item)">{{item}}
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import nextSearchImgSrc from '../../static/search.png'
+	import noDataImgSrc from '../../static/noData.png'
+	import nextScrollRightTopSrc from '../../static/top.png'
+	import pinyin from './js-pinyin/dist/pinyin.js'
+	
+	
+	// 创建pinyin实例
+	const pinyinInstance = new pinyin({charCase:0})
+	
+	const position = {}
+	
+	export default {
+		props: {
+			dataList: {
+				type: Array,
+				required: true,
+				default: () => {
+					return []
+				}
+			},
+			//显示的主键key值
+			idKey: {
+				type: String,
+				default: 'id'
+			},
+			nameKey: {
+				type: String,
+				default: 'name'
+			},
+			phoneKey: {
+				type: String,
+				default: 'phone'
+			},
+			imgKey: {
+				type: String,
+				default: 'img'
+			},
+			radius: {
+				type: String,
+				default: '6rpx'
+			},
+			showAvatar: {
+				type: Boolean,
+				default: true
+			},
+			isInterlock: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				searchStr: '',
+				scrollIntoView: '',
+				scrollIntoViewCopy: '',
+				scrollLeftObj: {},
+				oldObj: {},
+				scrollRightList: [],
+				hasData: true,
+				nextSearchImgSrc,
+				noDataImgSrc,
+				nextScrollRightTopSrc
+			};
+		},
+		created() {
+			this.$watch(() => this.dataList, (newList) => {
+				if (newList && newList.length) this.cleanData(newList)
+				if(this.isInterlock) {
+					this.$nextTick(() => {
+						Object.keys(this.scrollRightList).map(key => {
+							uni.createSelectorQuery().in(this).select(`#item${this.scrollRightList[key]}`).boundingClientRect(res => {
+								const { top } = res
+								position[this.scrollRightList[key]] = top
+							}).exec()
+						})
+					})
+				}
+			}, {
+				immediate: true,
+				deep: true,
+			})
+		},
+		methods: {
+			search() {
+				if (this.searchStr) {
+					let has = false
+					this.scrollLeftObj = JSON.parse(JSON.stringify(this.oldObj))
+					for (let i in this.scrollLeftObj) {
+						this.scrollLeftObj[i] = this.scrollLeftObj[i].filter(item => {
+							return (item[this.nameKey].indexOf(this.searchStr) != -1) || item[this.phoneKey]
+								.indexOf(this.searchStr) != -1
+						})
+						if (this.scrollLeftObj[i].length) has = true
+					}
+					if (has) this.hasData = true
+					else this.hasData = false
+				} else {
+					this.hasData = true
+					this.scrollLeftObj = JSON.parse(JSON.stringify(this.oldObj))
+				}
+			},
+			scrollCallback(e) {
+				const { detail } = e
+				const { scrollTop, scrollHeight } = detail
+				if (this.scrollIntoView === 'TOP') {
+					this.scrollIntoView = ''
+				}
+				
+				if (this.isInterlock) {
+					for (let key in position) {
+						if (position[key] - scrollTop > 0 && position[key] - scrollTop <= scrollHeight) {
+							this.scrollIntoViewCopy = key
+							return
+						}
+					}
+				}	
+			},
+			scrollTop() {
+				this.scrollIntoView = 'TOP'
+			},
+			cleanData(list) {
+				this.scrollRightList = this.getLetter()
+				let newList = []
+				list.forEach(res => {
+					let initial = pinyinInstance.getCamelChars(res.name.trim())
+					let firsfirs = initial ? initial.substring(0, 1) : ''
+					if (!newList[firsfirs]) newList[firsfirs] = []
+					newList[firsfirs].push({
+						[this.idKey]: res[this.idKey] || '',
+						[this.nameKey]: res[this.nameKey].trim() || '',
+						[this.phoneKey]: res[this.phoneKey] || '',
+						[this.imgKey]: res[this.imgKey] || ''
+					})
+				})
+				this.scrollRightList.forEach(t => {
+					if (newList[t]) {
+						this.$set(this.scrollLeftObj, t, newList[t])
+					} else {
+						this.$set(this.scrollLeftObj, t, [])
+					}
+				})
+				let surplusList = []
+				for (var i in newList) {
+					let han = this.scrollRightList.find(v => {
+						return v == i
+					})
+					if (!han) surplusList.push(newList[i])
+				}
+				surplusList.forEach(item => {
+					this.scrollLeftObj['#'] = this.scrollLeftObj['#'].concat(item)
+				})
+				this.oldObj = JSON.parse(JSON.stringify(this.scrollLeftObj))
+				
+				// 过滤不存在的关键索引
+				const existList = Object.keys(this.scrollLeftObj).filter(key => {
+					return this.scrollLeftObj[key].length
+				})
+				this.scrollRightList = this.scrollRightList.filter(key => {
+					return existList.some(k => k === key)
+				})
+			},
+			getLetter() {
+				let list = []
+				for (var i = 0; i < 26; i++) {
+					list.push(String.fromCharCode(65 + i))
+				}
+				list.push('#')
+				return list
+			},
+			chooseType(item) {
+				if (item == '#') item = 'BOTTOM'
+				this.scrollIntoView = item
+				this.scrollIntoViewCopy = item
+			},
+			preview(img) {
+				uni.previewImage({
+					current: 0,
+					urls: [img]
+				})
+			},
+			chooseItem(item) {
+				this.$emit('itemclick', item)
+			}
+		},
+	};
+</script>
+<style>
+	/deep/ ::-webkit-scrollbar {
+		width: 0;
+		height: 0;
+		color: transparent;
+		display: none;
+	}
+</style>
+<style lang="scss" scoped>
+	.next-list {
+		width: 100%;
+		height: 100vh;
+		background-color: #F4F4F4;
+		box-sizing: border-box;
+		padding-top: 1px;
+		.next-search {
+			width: 100%;
+			height: 106rpx;
+			background-color: #FFFFFF;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: fixed;
+			z-index: 9999;
+			top: 0;
+			left: 0;
+			.next-search-img {
+				width: 32rpx;
+				height: 32rpx;
+				position: absolute;
+				left: 64rpx;
+			}
+		
+			.next-input {
+				width: calc(100% - 64rpx);
+				height: 72rpx;
+				background: #EEEEEE;
+				border-radius: 36rpx;
+				padding: 0 32rpx 0 80rpx;
+				box-sizing: border-box;
+				color: #333333;
+			}
+		
+			.next-placeholder {
+				color: #777777;
+			}
+		}
+		.next-scroll-left {
+			height: 100%;
+			padding-top: 106rpx;
+			
+			.left-list {
+				height: auto;
+
+				.left-item-title {
+					width: calc(100% - 24rpx);
+					height: 60rpx;
+					padding-left: 24rpx;
+					text-align: left;
+					line-height: 60rpx;
+					font-size: 30rpx;
+					color: #666666;
+				}
+
+				.left-item-card {
+					width: 100%;
+					height: 112rpx;
+					background-color: #FFFFFF;
+					box-sizing: border-box;
+					padding-left: 24rpx;
+					display: flex;
+					align-items: center;
+					justify-content: flex-start;
+
+					.left-item-card-img {
+						width: 80rpx;
+						min-width: 80rpx;
+						height: 80rpx;
+						background-color: #CFCFCF;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						font-size: 36rpx;
+						font-weight: bold;
+						color: #FFFFFF;
+					}
+
+					.img-info {
+						background: none;
+						border: solid #f0f0f0 1rpx;
+					}
+
+					.left-item-card-info {
+						width: 100%;
+						margin-left: 32rpx;
+						height: 100%;
+						display: flex;
+						align-items: flex-start;
+						justify-content: center;
+						flex-direction: column;
+
+						.left-item-card-name {
+							font-size: 30rpx;
+							line-height: 30rpx;
+							color: #333333;
+						}
+
+						.left-item-card-phone {
+							margin-top: 14rpx;
+							font-size: 28rpx;
+							line-height: 28rpx;
+							color: #999999;
+						}
+					}
+				}
+			}
+
+			.no-data {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-items: center;
+				flex-direction: column;
+				margin-top: 25%;
+
+				.no-data-img {
+					width: 200rpx;
+					height: 200rpx;
+				}
+
+				.no-data-name {
+					margin-top: 20rpx;
+					font-size: 28rpx;
+					color: #666666;
+				}
+			}
+		}
+
+		.next-scroll-right {
+			position: fixed;
+			right: 0rpx;
+			top: 50%;
+			transform: translateY(-47%);
+			z-index: 999 !important;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+
+			.next-scroll-right-top {
+				width: 32rpx;
+				height: 32rpx;
+				margin-right: 14rpx;
+				z-index: 999 !important;
+			}
+
+			.next-scroll-right-name {
+				width: 32rpx;
+				padding-right: 14rpx;
+				height: 28rpx;
+				font-size: 22rpx;
+				color: #333333;
+				line-height: 22rpx;
+				margin-top: 8rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.next-scroll-right-select {
+				padding: 0;
+				margin-right: 14rpx;
+				width: 28rpx;
+				height: 28rpx;
+				border-radius: 50%;
+				background: #2991FF;
+				color: #FFFFFF;
+			}
+		}
+	}
+</style>

uni_modules/next-indexed-xlist/package.json

@@ -0,0 +1,85 @@
+{
+	"id": "next-indexed-xlist",
+	"displayName": "next-indexed-xlist(vue2 vue3通用)通讯录、城市、地址列表；支持双向联动",
+	"version": "1.1.1",
+	"description": "通讯录、城市、地址索引列表组件，支持双向联动，自带搜索功能，可自定义显示字段，用于通讯录列表、城市列表、地址列表等",
+	"keywords": [
+        "通讯录",
+        "索引列表",
+        "索引",
+        "地址列表",
+        "城市列表"
+    ],
+	"repository": "",
+	"engines": {
+		"HBuilderX": "^3.1.0"
+	},
+	"dcloudext": {
+		"type": "component-vue",
+		"sale": {
+			"regular": {
+				"price": "0.00"
+			},
+			"sourcecode": {
+				"price": "0.00"
+			}
+		},
+		"contact": {
+			"qq": ""
+		},
+		"declaration": {
+			"ads": "无",
+			"data": "无",
+			"permissions": "无"
+		},
+		"npmurl": ""
+	},
+	"uni_modules": {
+		"dependencies": [],
+		"encrypt": [],
+		"platforms": {
+			"cloud": {
+				"tcb": "y",
+				"aliyun": "y"
+			},
+			"client": {
+				"Vue": {
+					"vue2": "y",
+					"vue3": "y"
+				},
+				"App": {
+					"app-vue": "y",
+					"app-nvue": "u"
+				},
+				"H5-mobile": {
+					"Safari": "y",
+					"Android Browser": "y",
+					"微信浏览器(Android)": "y",
+					"QQ浏览器(Android)": "y"
+				},
+				"H5-pc": {
+					"Chrome": "u",
+					"IE": "u",
+					"Edge": "u",
+					"Firefox": "u",
+					"Safari": "u"
+				},
+				"小程序": {
+					"微信": "y",
+					"阿里": "u",
+					"百度": "u",
+					"字节跳动": "u",
+					"QQ": "u",
+					"钉钉": "u",
+					"快手": "u",
+					"飞书": "u",
+					"京东": "u"
+				},
+				"快应用": {
+					"华为": "u",
+					"联盟": "u"
+				}
+			}
+		}
+	}
+}

uni_modules/next-indexed-xlist/readme.md

@@ -0,0 +1,329 @@
+# next-indexed-xlist适用于uni-app项目的通讯录、城市、地址索引列表组件
+### 本组件目前兼容微信小程序、H5 app
+### 本组件是通讯录、城市、地址索引列表组件，自带搜索功能，可自定义显示字段，用于通讯录列表、城市列表、地址列表等
+
+> 遇到问题或有建议可以加入QQ群(<font color=#f00>455948571</font>)反馈;  
+> 如果觉得组件不错，<font color=#f00>给五星鼓励鼓励</font>咯;
+> 
+> 本插件居于npmjs开源包[js-pinyin](https://www.npmjs.com/package/js-pinyin) 进行开发，详细插件功能可以到npm上进行查看;
+
+	
+### 使用示例
+
+``` html
+<template>
+	<view class="page-main">
+		<next-indexed-xlist :dataList="dataList" :showAvatar="true" @itemclick="itemclick">
+			<!--这是默认插槽,额外添加部分-->
+			<!-- 	<view class="content-block">
+				<view class="title"><text>历史记录:</text></view>
+				<view class="btn"><text>朝阳区</text></view>
+				<view class="btn"><text>东城区</text></view>
+				<view class="btn"><text>海淀区</text></view>
+			</view> -->
+		</next-indexed-xlist>
+	</view>
+</template>
+```
+### vue3使用
+``` ts
+<script setup lang="ts">
+	import { ref } from "vue";
+	// 通讯录数据形式
+	const dataList = ref([{
+		id: '1',
+		name: '刘**',
+		phone: '181****5576',
+		img: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300'
+	}, {
+		id: '2',
+		name: '王**',
+		phone: '181****5576',
+		img: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300'
+	}, {
+		id: '3',
+		name: '黎**',
+		phone: '181****5576',
+		img: 'https://img2.baidu.com/it/u=453253244,3693084626&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+	}, {
+		id: '4',
+		name: '王**',
+		phone: '181****5576',
+		img: 'https://img2.baidu.com/it/u=453253244,3693084626&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+	}, {
+		id: '5',
+		name: '马**',
+		phone: '181****5576',
+		img: 'https://c-ssl.dtstatic.com/uploads/item/202005/17/20200517225139_Awrwa.thumb.1000_0.jpeg'
+	}, {
+		id: '6',
+		name: '韩**',
+		phone: '181****5576',
+		img: 'https://c-ssl.dtstatic.com/uploads/item/202005/17/20200517225139_Awrwa.thumb.1000_0.jpeg'
+	}, {
+		id: '7',
+		name: '张**',
+		phone: '181****5576',
+		img: 'https://img0.baidu.com/it/u=2337762009,1252339875&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+	}, {
+		id: '8',
+		name: '杨**',
+		phone: '181****5576',
+		img: 'https://img0.baidu.com/it/u=2337762009,1252339875&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+	}, {
+		id: '9',
+		name: '张**',
+		phone: '18198045576',
+		img: 'https://img2.baidu.com/it/u=2638426337,2608406797&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+	}, {
+		id: '10',
+		name: '李**',
+		phone: '181****1176',
+		img: 'https://img2.baidu.com/it/u=2638426337,2608406797&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+	}, {
+		id: '11',
+		name: '陈**',
+		phone: '153****5576',
+		img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201412%2F25%2F20141225133106_zjyfa.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687677419&t=3464ddbfcb8ad0291ed5f38374f23869'
+	}, {
+		id: '12',
+		name: '李**',
+		phone: '131****5576',
+		img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201412%2F25%2F20141225133106_zjyfa.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687677419&t=3464ddbfcb8ad0291ed5f38374f23869'
+	}, {
+		id: '13',
+		name: '唐**',
+		phone: '181****3476',
+		img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201412%2F25%2F20141225133106_zjyfa.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1687677419&t=3464ddbfcb8ad0291ed5f38374f23869'
+	}, {
+		id: '14',
+		name: '刘**',
+		phone: '181****5576',
+		img: 'https://img2.baidu.com/it/u=453253244,3693084626&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+	}, {
+		id: '15',
+		name: '秦**',
+		phone: '181****5576',
+		img: 'https://img2.baidu.com/it/u=453253244,3693084626&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+	}, {
+		id: '16',
+		name: '朱**',
+		phone: '181****5576',
+		img: 'https://c-ssl.dtstatic.com/uploads/item/202005/17/20200517225139_Awrwa.thumb.1000_0.jpeg'
+	}])
+	
+	// 地址数据形式
+	// const dataList = ref([{
+	// 	"id": 6,
+	// 	"code": "110101000000",
+	// 	"name": "东城区",
+	// 	"parentCode": "110100000000",
+	// 	"level": 3,
+	// 	"abbr": "DC",
+	// 	"deleted": 0
+	// }, {
+	// 	"id": 10,
+	// 	"code": "110105000000",
+	// 	"name": "朝阳区",
+	// 	"parentCode": "110100000000",
+	// 	"level": 3,
+	// 	"abbr": "CY",
+	// 	"deleted": 0
+	// }, {
+	// 	"id": 13,
+	// 	"code": "110106000000",
+	// 	"name": "丰台区",
+	// 	"parentCode": "110100000000",
+	// 	"level": 3,
+	// 	"abbr": "FT",
+	// 	"deleted": 0
+	// }, {
+	// 	"id": 14,
+	// 	"code": "110107000000",
+	// 	"name": "石景山区",
+	// 	"parentCode": "110100000000",
+	// 	"level": 3,
+	// 	"abbr": "SJS",
+	// 	"deleted": 0
+	// }, {
+	// 	"id": 15,
+	// 	"code": "110108000000",
+	// 	"name": "海淀区",
+	// 	"parentCode": "110100000000",
+	// 	"level": 3,
+	// 	"abbr": "HD",
+	// 	"deleted": 0
+	// }, {
+	// 	"id": 16,
+	// 	"code": "110109000000",
+	// 	"name": "门头沟区",
+	// 	"parentCode": "110100000000",
+	// 	"level": 3,
+	// 	"abbr": "MTG",
+	// 	"deleted": 0
+	// }, {
+	// 	"id": 19,
+	// 	"code": "110111000000",
+	// 	"name": "房山区",
+	// 	"parentCode": "110100000000",
+	// 	"level": 3,
+	// 	"abbr": "FS",
+	// 	"deleted": 0
+	// }, {
+	// 	"id": 20,
+	// 	"code": "110112000000",
+	// 	"name": "通州区",
+	// 	"parentCode": "110100000000",
+	// 	"level": 3,
+	// 	"abbr": "TZ",
+	// 	"deleted": 0
+	// }, {
+	// 	"id": 21,
+	// 	"code": "110113000000",
+	// 	"name": "顺义区",
+	// 	"parentCode": "110100000000",
+	// 	"level": 3,
+	// 	"abbr": "SY",
+	// 	"deleted": 0
+	// }, {
+	// 	"id": 22,
+	// 	"code": "110114000000",
+	// 	"name": "昌平区",
+	// 	"parentCode": "110100000000",
+	// 	"level": 3,
+	// 	"abbr": "CP",
+	// 	"deleted": 0
+	// }, {
+	// 	"id": 23,
+	// 	"code": "110115000000",
+	// 	"name": "大兴区",
+	// 	"parentCode": "110100000000",
+	// 	"level": 3,
+	// 	"abbr": "DX",
+	// 	"deleted": 0
+	// }, {
+	// 	"id": 25,
+	// 	"code": "110116000000",
+	// 	"name": "怀柔区",
+	// 	"parentCode": "110100000000",
+	// 	"level": 3,
+	// 	"abbr": "HR",
+	// 	"deleted": 0
+	// }, {
+	// 	"id": 26,
+	// 	"code": "110117000000",
+	// 	"name": "平谷区",
+	// 	"parentCode": "110100000000",
+	// 	"level": 3,
+	// 	"abbr": "PG",
+	// 	"deleted": 0
+	// }, {
+	// 	"id": 27,
+	// 	"code": "110118000000",
+	// 	"name": "密云区",
+	// 	"parentCode": "110100000000",
+	// 	"level": 3,
+	// 	"abbr": "MY",
+	// 	"deleted": 0
+	// }, {
+	// 	"id": 28,
+	// 	"code": "110119000000",
+	// 	"name": "延庆区",
+	// 	"parentCode": "110100000000",
+	// 	"level": 3,
+	// 	"abbr": "YQ",
+	// 	"deleted": 0
+	// }])
+	function itemclick(e) {
+		console.log('点击列表回调：', e)
+	}
+</script>
+<style lang="scss">
+	.content-block {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		background-color: #fff;
+		.title {
+			color: #333;
+			padding: 20rpx;
+			margin-right: 20rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+		}
+		.btn {
+			color: #ccc;
+			padding: 10rpx;
+			border: 1rpx solid #ccc;
+			border-radius: 10rpx;
+			margin: 20rpx 10rpx;
+			font-size: 28rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			
+		}
+	}
+</style>
+```
+### vue2使用
+``` ts
+export default {
+	data () {
+		return {
+			dataList: [{
+				id: '1',
+				name: '刘**',
+				phone: '181****5576',
+				img: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300'
+			}, {
+				id: '2',
+				name: '王**',
+				phone: '181****5576',
+				img: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300'
+			}, {
+				id: '3',
+				name: '黎**',
+				phone: '181****5576',
+				img: 'https://img2.baidu.com/it/u=453253244,3693084626&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+			}, {
+				id: '4',
+				name: '王**',
+				phone: '181****5576',
+				img: 'https://img2.baidu.com/it/u=453253244,3693084626&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'
+			}]
+		}
+	},
+	methods: {
+		itemclick(e) {
+			console.log('点击列表回调：', e)
+		}
+	}
+}
+```
+### 属性说明
+| 名称                        | 类型           | 默认值                  | 描述           				|
+| ----------------------------|--------------- | ---------------------- | ----------------------|
+| dataList                    | Array          | []                     | 数据源									|
+| idKey                       | String         | id                     | 显示的主键key值				|
+| nameKey                     | String         | name                   | 显示的名字key值				|
+| phoneKey                    | String         | phone                  | 显示的电话key值				|
+| imgKey                      | String         | img                    | 显示的头像key值				|
+| radius                      | Number         | 4rpx                   | 头像圆角(rpx、px、%) 	|
+| showAvatar                  | Boolean        | true                   | 是否显示头像					 	|
+| isInterlock                 | Boolean        | false                  | 是否双向联动						|
+
+
+## Event 事件
+|事件名	|说明																										|类型	|回调参数	|
+|----		|----																										|----	|----			|
+|itemclick|菜单项item点击事件																		|emit	|Object		|
+
+### 预览
+
+***
+
+|                              (通信录演示效果)                  			 						|                      (地区选择演示效果)          										 						 |
+| :-----------------------------------------------------------------------------: | :------------------------------------------------------------------------------: |
+| ![](https://lixueshiaa.github.io/webtest/www/static/next-indexed-list-a.gif) 		| ![](https://lixueshiaa.github.io/webtest/www/static/next-indexed-list-b.gif) 		 |