#组件使用说明
>示例数据均为静态数据,接口生成如下结构的数据:(已上传完整demo)
---
#### 索引列表
```
{
"A": [{
"id": 56,
"spell": "aba",
"name": "阿坝"
}]
......
}
```
#### 通讯录列表
```
{
"A": [{
"id": 56,
"spell": "zs",
"name": "张三",
"phoneNumber":"13143599999"
}]
......
}
```
> id spell name 为必须字段 phoneNumber字段如果没有则不返回
---
#### 使用示例 (phones.vue)
```
<template>
<view>
<phone-directory :phones="phones" @paramClick="paramClick"></phone-directory>
</view>
</template>
<script>
import phoneDirectory from '@/components/phone-directory/phone-directory.vue'
export default {
name:"phones",
components:{
phoneDirectory
},
data() {
return {
//示例数据
phones:{
"A": [{
"id": 56,
"spell": "aba",
"name": "阿坝"
}, {
"id": 57,
"spell": "akesu",
"name": "阿克苏"
}, {
"id": 58,
"spell": "alashanmeng",
"name": "阿拉善盟"
}, {
"id": 59,
"spell": "aletai",
"name": "阿勒泰"
}, {
"id": 60,
"spell": "ali",
"name": "阿里"
}, {
"id": 61,
"spell": "ankang",
"name": "安康"
}, {
"id": 62,
"spell": "anqing",
"name": "安庆"
}, {
"id": 63,
"spell": "anshan",
"name": "鞍山"
}, {
"id": 64,
"spell": "anshun",
"name": "安顺"
}, {
"id": 65,
"spell": "anyang",
"name": "安阳"
}, {
"id": 338,
"spell": "acheng",
"name": "阿城"
}, {
"id": 339,
"spell": "anfu",
"name": "安福"
}, {
"id": 340,
"spell": "anji",
"name": "安吉"
}, {
"id": 341,
"spell": "anning",
"name": "安宁"
}, {
"id": 342,
"spell": "anqiu",
"name": "安丘"
}, {
"id": 343,
"spell": "anxi",
"name": "安溪"
}, {
"id": 344,
"spell": "anyi",
"name": "安义"
}, {
"id": 345,
"spell": "anyuan",
"name": "安远"
}],
"B": [{
"id": 1,
"spell": "beijing",
"name": "北京"
}, {
"id": 66,
"spell": "baicheng",
"name": "白城"
}, {
"id": 67,
"spell": "baise",
"name": "百色"
}, {
"id": 68,
"spell": "baishan",
"name": "白山"
}]
........
}
}
},
methods : {
paramClick (e) {
console.log(e)
}
}
}
</script>
<style>
</style>
```
#### 使用示例 (phone-search.vue)
```
<template>
<view>
<phone-search-list :phones="phones" @paramClick="paramClick"></phone-search-list>
</view>
</template>
<script>
import phoneSearchList from '@/components/phone-directory/phone-search-list.vue'
export default {
name:"phone-search",
components:{
phoneSearchList
},
data() {
return {
phones:null,
}
},
onLoad (option) {
this.phones = JSON.parse(unescape(option.phones))
},
methods:{
paramClick (e) {
console.log(e)
}
}
}
</script>
<style>
</style>
```
#### 引入
>把phone-directory目录拷贝至项目components
>把pages下的phones目录拷贝至项目pages目录下
>在项目pages.json文件写入
(```)
{
"path" : "pages/phones/phones",
"style" : {
"navigationBarTitleText" : "通讯录",
"app-plus":{
"bounce":"none",
"scrollIndicator":"none"
}
}
},
{
"path" : "pages/phones/phone-search",
"style" : {
"navigationBarTitleText" : "搜索联系人"
}
}
(```)
### 组件参数说明
属性名|类型|是否必填|说明
--|:--:|--:
phones|Object|是|接口数据
paramClick|Object|是|当点击时返回对应参数
>文件名 参数 也可自己定义 搜索框内容可在phone-directory.vue 和phone-search-list.vue 文件修改
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
开源台球助教系统源码,由于是商业版本版本,目前只开源用户端版本部分模块源码提供学习研究,使用uniapp技术,提供学习使用不可商业,商业使用请联系授权 适配支持公众号+APP+H5+小程序,使用Hbuil功能说明 轮播,教练列表、教练详情、下单、助教地址、预约助教、台球厅、我的订单、门店订单、登录等模块提供需要学习的朋友研究学习使用der导入即可运行
资源推荐
资源详情
资源评论
收起资源包目录
省钱兄JAVA台球助教台球教练多端系统源码支持小程序+公众号+H5+APP uniapp前端模板 (418个子文件)
iconfont.css 79KB
icon.css 70KB
icon.css 70KB
icon.css 69KB
simplepro.css 63KB
main.css 63KB
thorui.css 24KB
index.css 22KB
style.css 14KB
common.css 8KB
commodity.css 6KB
animation.css 3KB
main.css 2KB
main.css 2KB
mescroll-down.css 1KB
mescroll-up.css 918B
mescroll-body.css 794B
mescroll-uni.css 712B
.DS_Store 6KB
index.html 1KB
taobao.jks 2KB
area.js 122KB
data.js 76KB
qrcode.js 42KB
QS-SharePoster.js 37KB
QRCodeAlg.js 34KB
async-validator.js 33KB
mescroll-uni.js 32KB
weCropper.js 31KB
uqrcode.js 30KB
citySelect.js 21KB
ican-H5Api.js 21KB
MpHtmlParser.js 18KB
city.js 14KB
app.js 13KB
md5.js 12KB
share.js 8KB
httpRequest.js 8KB
index.js 6KB
image-tools.js 5KB
index.js 4KB
test.js 4KB
mixins.js 4KB
queue.js 4KB
colorGradient.js 4KB
route.js 3KB
icons.js 3KB
CssHandler.js 3KB
renderjs.js 3KB
mescroll-uni-option.js 2KB
config.js 2KB
mixin.js 2KB
cache.js 2KB
emitter.js 2KB
timeFormat.js 2KB
mescroll-more.js 2KB
mescroll-mixins.js 2KB
mescroll-more-item.js 2KB
guid.js 2KB
getParent.js 2KB
timeFrom.js 2KB
queryParams.js 1KB
province.js 1KB
mescroll-comp.js 1KB
type2icon.js 976B
debounce.js 881B
color.js 856B
deepMerge.js 789B
$parent.js 777B
throttle.js 770B
css-variable.js 675B
deepClone.js 658B
main.js 584B
config.js 513B
index.js 484B
popup.js 387B
addUnit.js 374B
mpShare.js 365B
message.js 356B
zIndex.js 343B
trim.js 339B
mescroll-i18n.js 299B
randomArray.js 228B
random.js 196B
config.js 194B
toast.js 139B
sys.js 130B
bem.js 59B
manifest.json 7KB
pages.json 6KB
package.json 2KB
package.json 2KB
package.json 701B
package.json 316B
mxkj.keystore 2KB
index.less 5KB
LICENSE 7KB
LICENSE 1KB
README.md 4KB
README.md 3KB
共 418 条
- 1
- 2
- 3
- 4
- 5
资源评论
省钱兄科技
- 粉丝: 2489
- 资源: 39
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功