前言
最近做到了一个移动端联系人列表功能
但是不让使用移动端的ui库，只能使用uniapp的组件
所以就发现了这个索引列表组件
但是使用过后发现有一点问题，比如我需要头像，但是他没有自带图片功能。
比如我使用过后，我自定义了导航栏但是被覆盖住了，把导航栏顶没了。
这里我都一一的解决了，所以这里记录一下。
效果图
数据还是用自带的数据模拟了一下，然后图片我随便换了几个试试效果。
使用方法：按步骤来
1，打开插件市场把这个组件下载安装到自己的项目。这个就不细说了。应该都会吧
2，进入项目代码，找到这个文件uni-indexed-list.vue
然后更改里面的这个部分。改成我这样。
当然我会把完整代码放下面，直接复制一下也行
<template>
<view class="uni-indexed-list" ref="list" id="list">
<!-- #ifdef APP-NVUE -->
<list class="uni-indexed-list__scroll" scrollable="true" show-scrollbar="false">
<cell v-for="(list, idx) in lists" :key="idx" :ref="'uni-indexed-list-' + idx">
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
<scroll-view :scroll-into-view="scrollViewId" class="uni-indexed-list__scroll" scroll-y>
<view v-for="(list, idx) in lists" :key="idx" :id="'uni-indexed-list-' + idx">
<!-- #endif -->
<indexed-list-item :list="list" :loaded="loaded" :idx="idx" :showSelect="showSelect"
@itemClick="onClick"></indexed-list-item>
<!-- #ifndef APP-NVUE -->
</view>
</scroll-view>
<!-- #endif -->
<!-- #ifdef APP-NVUE -->
</cell>
</list>
<!-- #endif -->
<view class="uni-indexed-list__menu" @touchstart="touchStart" @touchmove.stop.prevent="touchMove"
@touchend="touchEnd" @mousedown.stop="mousedown" @mousemove.stop.prevent="mousemove"
@mouseleave.stop="mouseleave">
<view v-for="(list, key) in lists" :key="key" class="uni-indexed-list__menu-item"
:class="touchmoveIndex == key ? 'uni-indexed-list__menu--active' : ''">
<text class="uni-indexed-list__menu-text"
:class="touchmoveIndex == key ? 'uni-indexed-list__menu-text--active' : ''">{
{
list.key }}</text>
</view>
</view>
<view v-if="touchmove" class="uni-indexed-list__alert-wrapper">
<text class="uni-indexed-list__alert">{
{
lists[touchmoveIndex].key }}</text>
</view>
</view>
</template>
<script>
import indexedListItem from './uni-indexed-list-item.vue'
// #ifdef APP-NVUE
const dom = weex.requireModule('dom');
// #endif
// #ifdef APP-PLUS
function throttle(func, delay) {
var prev = Date.now();
return function() {
var context = this;
var args = arguments;
var now = Date.now();
if (now - prev >= delay) {
func.apply(context, args);
prev = Date.now();
}
}
}
function touchMove(e) {
let pageY = e.touches[0].pageY
let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
if (this.touchmoveIndex === index) {
return false
}
let item = this.lists[index]
if (item) {
// #ifndef APP-NVUE
this.scrollViewId = 'uni-indexed-list-' + index
this.touchmoveIndex = index
// #endif
// #ifdef APP-NVUE
dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
animated: false
})
this.touchmoveIndex = index
// #endif
}
}
const throttleTouchMove = throttle(touchMove, 40)
// #endif
/**
* IndexedList 索引列表
* @description 用于展示索引列表
* @tutorial https://ext.dcloud.net.cn/plugin?id=375
* @property {Boolean} showSelect = [true|false] 展示模式
* @value true 展示模式
* @value false 选择模式
* @property {Object} options 索引列表需要的数据对象
* @event {Function} click 点击列表事件 ，返回当前选择项的事件对象
* @example <uni-indexed-list options="" showSelect="false" @click=""></uni-indexed-list>
*/
export default {
name: 'UniIndexedList',
components: {
indexedListItem
},
emits: ['click'],
props: {
options: {
type: Array,
default () {
return []
}
},
showSelect: {
type: Boolean,
default: false
}
},
data() {
return {
lists: [],
winHeight: 0,
itemHeight: 0,
winOffsetY: 0,
touchmove: false,
touchmoveIndex: -1,
scrollViewId: '',
touchmovable: true,
loaded: false,
isPC: false
}
},
watch: {
options: {
handler: function() {
this.setList()
},
deep: true
}
},
mounted() {
// #ifdef H5
this.isPC = this.IsPC()
// #endif
setTimeout(() => {
this.setList()
}, 50)
setTimeout(() => {
this.loaded = true
}, 300);
},
methods: {
setList() {
let index = 0;
this.lists = []
this.options.forEach((value, index) => {
if (value.data.length === 0) {
return
}
let indexBefore = index
let items = value.data.map(item => {
let obj = {
}
obj['key'] = value.letter
obj['name'] = item.name
obj['pic'] = item.pic
obj['itemIndex'] = index
index++
obj.checked = item.checked ? item.checked : false
return obj
})
this.lists.push({
title: value.letter,
key: value.letter,
items: items,
itemIndex: indexBefore
})
})
// #ifndef APP-NVUE
uni.createSelectorQuery()
.in(this)
.select('#list')
.boundingClientRect()
.exec(ret => {
this.winOffsetY = ret[0].top
this.winHeight = ret[0].height
this.itemHeight = this.winHeight / this.lists.length
})
// #endif
// #ifdef APP-NVUE
dom.getComponentRect(this.$refs['list'], (res) => {
this.winOffsetY = res.size.top
this.winHeight = res.size.height
this.itemHeight = this.winHeight / this.lists.length
})
// #endif
},
touchStart(e) {
this.touchmove = true
let pageY = this.isPC ? e.pageY : e.touches[0].pageY
let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
let item = this.lists[index]
if (item) {
this.scrollViewId = 'uni-indexed-list-' + index
this.touchmoveIndex = index
// #ifdef APP-NVUE
dom.scrollToElement(this.$refs['uni-indexed-list-' + index][0], {
animated: false
})
// #endif
}
},
touchMove(e) {
// #ifndef APP-PLUS
let pageY = this.isPC ? e.pageY : e.touches[0].pageY
let index = Math.floor((pageY - this.winOffsetY) / this.itemHeight)
if (this.touchmoveIndex === index) {
return false
}
let item = this.lists[index]
if (item) {
this.scrollViewId = 'uni-indexed-list-' + index
this.touchmoveIndex = index
}
// #endif
// #ifdef APP-PLUS
throttleTouchMove.call(this, e)
// #endif
},
touchEnd() {
this.touchmove = false
// this.touchmoveIndex = -1
},
/**
* 兼容 PC @tian
*/
mousedown(e) {
if (!this.isPC) return
this.touchStart(e)
},
mousemove(e) {
if (!this.isPC) return
this.touchMove(e)
},
mouseleave(e) {
if (!this.isPC) return
this.touchEnd(e)
},
// #ifdef H5
IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
var flag = true;
for (let v = 0; v < Agents.length - 1; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
},
// #endif
onClick(e) {
let {
idx,
index
} = e
let obj = {
}
for (let key in this.lists[idx].items[index]) {
obj[key] = this.lists[idx].items[index][key]
}
let select = []
if (this.showSelect) {
this.lists[idx].items[index].checked = !this.lists[idx].items[index].checked
this.lists.forEach((value, idx) => {
value.items.forEach((item, index) => {
if (item.checked) {
let obj = {
}
for (let key in this.lists[idx].items[index]) {
obj[key] = this.lists[idx].items[index][key]
}
select.push(obj)
}
})
})
}
this.$emit('click', {
item: obj,
select: select
})
}
}
}
</script>
<style lang="scss" scoped>
.uni-indexed-list {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.uni-indexed-list__scroll {
flex: 1;
}
.uni-indexed-list__menu {
width: 24px;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
}
.uni-indexed-list__menu-item {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
align-items: center;
justify-content: center;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-indexed-list__menu-text {
font-size: 12px;
text-align: center;
color: #aaa;
}
.uni-indexed-list__menu--active {
// background-color: rgb(200, 200, 200);
}
.uni-indexed-list__menu--active {
}
.uni-indexed-list__menu-text--active {
border-radius: 16px;
width: 16px;
height: 16px;
line-height: 16px;
background-color: #007aff;
color: #fff;
}
.uni-indexed-list__alert-wrapper {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: center;
}
.uni-indexed-list__alert {
width: 80px;
height: 80px;
border-radius: 80px;
text-align: center;
line-height: 80px;
font-size: 35px;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
3，再找到下面的这个文件。uni-indexed-list-item.vue
然后更改这一部分，也就是把图片加进去。
然后我这里更改了中间ABC的样式，所以大家可以酌情要不要改，反正我觉得原版的有点不好看，就调整了一下
然后是完整代码也放出来。需要的直接复制。
<template>
<view>
<view v-if="loaded || list.itemIndex < 15" class="uni-indexed-list__title-wrapper">
<text v-if="list.items && list.items.length > 0" class="uni-indexed-list__title">{
{
list.key }}</text>
</view>
<view v-if="(loaded || list.itemIndex < 15) && list.items && list.items.length > 0" class="uni-indexed-list__list">
<view v-for="(item, index) in list.items" :key="index" class="uni-indexed-list__item" hover-class="uni-indexed-list__item--hover">
<view class="uni-indexed-list__item-container" @click="onClick(idx, index)">
<view class="uni-indexed-list__item-border" :class="{'uni-indexed-list__item-border--last':index===list.items.length-1}">
<view v-if="showSelect" style="margin-right: 20rpx;">
<uni-icons :type="item.checked ? 'checkbox-filled' : 'circle'" :color="item.checked ? '#007aff' : '#C0C0C0'" size="24" />
</view>
<view style="margin-right: 20rpx;">
<image :src="item.pic" mode="" style="width:30px;height:30px;"></image>
</view>
<text class="uni-indexed-list__item-content">{
{
item.name }}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'UniIndexedList',
emits:['itemClick'],
props: {
loaded: {
type: Boolean,
default: false
},
idx: {
type: Number,
default: 0
},
list: {
type: Object,
default () {
return {
}
}
},
showSelect: {
type: Boolean,
default: false
}
},
methods: {
onClick(idx, index) {
this.$emit("itemClick", {
idx,
index
})
}
}
}
</script>
<style lang="scss" scoped>
.uni-indexed-list__list {
background-color: $uni-bg-color;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #DEDEDE;
}
.uni-indexed-list__item {
font-size: 14px;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.uni-indexed-list__item-container {
padding-left: 15px;
flex: 1;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
/* #endif */
flex-direction: row;
justify-content: space-between;
align-items: center;
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
.uni-indexed-list__item-border {
flex: 1;
position: relative;
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
/* #endif */
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 50px;
padding: 25px;
padding-left: 0;
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #DEDEDE;
}
.uni-indexed-list__item-border--last {
border-bottom-width: 0px;
}
.uni-indexed-list__item-content {
flex: 1;
font-size: 14px;
color: #191919;
}
.uni-indexed-list {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.uni-indexed-list__title-wrapper {
/* #ifndef APP-NVUE */
display: flex;
width: 100%;
/* #endif */
background-color: #F2F2F2;
}
.uni-indexed-list__title {
padding: 6px 12px;
line-height: 16px;
font-size: 16px;
font-weight: 500;
color:#5B5B5B;
}
</style>
然后就可以直接使用了
4，传数据的格式
组件使用方法，出现覆盖其他组件的情况如何解决，比如上面的搜索栏或者自定义导航栏被盖住
完整代码直接发出来看吧
问题点是：
这个组件给自己的最外层盒子加了个定位，在这里
所以就造成了他是脱离文档流的，然后会导致比如你再上写了其他的组件比如搜索栏，
自定义导航栏之类的东西都不显示了，因为被这个组件顶上去盖住了。
所以我们的解决办法很简单，就是直接在外面套一层view盒子
然后给一个position: relative;就可以限制住这个组件不要乱覆盖别的盒子了。
然后组件的高度我们用uni的方法来计算出动态的高度，最终实现我们需要的效果。
<template>
<view>
<!-- 自定义导航栏 -->
<view class="title_bar">
<uni-nav-bar title="通讯录" :statusBar="true" left-icon="bars" @clickLeft="menus"></uni-nav-bar>
</view>
<view class="indexlist" :style="{height:height+'px'}">
<uni-indexed-list :options="list" :showSelect="false" @click="bindClick"></uni-indexed-list>
</view>
</view>
</template>
<script>
export default {
data() {
return {
height:0,
list: [{
'letter': 'A',
'data': [{
name: '阿里呀',
pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F22%2F20200322091214_tuesm.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1683339658&t=4a36d3c94d2be9f7f6d29c3ddd350d3c'
},
{
name: '爱',
pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F4a677e9f-6326-4f5a-b581-c3f2dd2dbb36%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1683339701&t=9534d88b7d352b3dad1b4ba7b80ea216'
},
{
name: '阿云',
pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F02%2F20200502005351_MfnWJ.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1683339726&t=d5fb3b34fb2a91fa65e4d46c3f186cd4'
},
{
name: '阿司',
pic: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202101%2F31%2F20210131131407_f4f93.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1683339765&t=3193c93a9dc5d62aa00e7475f34e336f'
},
{
name: '安徽',
pic: 'https://img1.baidu.com/it/u=422323813,1539412709&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=485'
}
]
}, {
'letter': 'B',
'data': [{
name: '保山机场',
pic: '/static/logo.png'
},
{
name: '包头机场',
pic: '/static/logo.png'
},
{
name: '北海福成机场',
pic: '/static/logo.png'
},
{
name: '北京南苑机场',
pic: '/static/logo.png'
},
{
name: '北京首都国际机场',
pic: '/static/logo.png'
}
]
}, {
'letter': 'C',
'data': [{
name: '长白山机场',
pic: '/static/logo.png'
},
{
name: '长春龙嘉国际机场',
pic: '/static/logo.png'
},
{
name: '常德桃花源机场',
pic: '/static/logo.png'
},
{
name: '昌都邦达机场',
pic: '/static/logo.png'
},
{
name: '长沙黄花国际机场',
pic: '/static/logo.png'
}
]
}, {
'letter': 'D',
'data': [{
name: '大理机场',
pic: '/static/logo.png'
},
{
name: '大连周水子国际机场',
pic: '/static/logo.png'
},
{
name: '大庆萨尔图机场',
pic: '/static/logo.png'
},
{
name: '达州河市机场',
pic: '/static/logo.png'
},
{
name: '丹东浪头机场',
pic: '/static/logo.png'
}
]
}, {
'letter': 'E',
'data': [{
name: '鄂尔多斯机场',
pic: '/static/logo.png'
},
{
name: '恩施许家坪机场',
pic: '/static/logo.png'
},
{
name: '二连浩特赛乌苏国际机场',
pic: '/static/logo.png'
}
]
}, {
'letter': 'F',
'data': [{
name: '阜阳西关机场',
pic: '/static/logo.png'
},
{
name: '福州长乐国际机场',
pic: '/static/logo.png'
}
]
}, {
'letter': 'G',
'data': [{
name: '赣州黄金机场',
pic: '/static/logo.png'
},
{
name: '格尔木机场',
pic: '/static/logo.png'
},
{
name: '固原六盘山机场',
pic: '/static/logo.png'
},
{
name: '广元盘龙机场',
pic: '/static/logo.png'
},
{
name: '广州白云国际机场',
pic: '/static/logo.png'
},
{
name: '桂林两江国际机场',
pic: '/static/logo.png'
}
]
}, {
'letter': 'H',
'data': [{
name: '哈尔滨太平国际机场',
pic: '/static/logo.png'
},
{
name: '哈密机场',
pic: '/static/logo.png'
},
{
name: '海口美兰国际机场',
pic: '/static/logo.png'
},
{
name: '海拉尔东山国际机场',
pic: '/static/logo.png'
},
{
name: '邯郸机场',
pic: '/static/logo.png'
},
{
name: '汉中机场',
pic: '/static/logo.png'
}
]
}, {
'letter': 'I',
'data': []
}, {
'letter': 'J',
'data': [{
name: '济南遥墙国际机场',
pic: '/static/logo.png'
},
{
name: '济宁曲阜机场',
pic: '/static/logo.png'
},
{
name: '鸡西兴凯湖机场',
pic: '/static/logo.png'
},
{
name: '佳木斯东郊机场',
pic: '/static/logo.png'
},
{
name: '嘉峪关机场',
pic: '/static/logo.png'
},
{
name: '景德镇机场',
pic: '/static/logo.png'
}
]
}, {
'letter': 'K',
'data': [{
name: '喀什机场',
pic: '/static/logo.png'
},
{
name: '克拉玛依机场',
pic: '/static/logo.png'
},
{
name: '库车龟兹机场',
pic: '/static/logo.png'
},
{
name: '库尔勒机场',
pic: '/static/logo.png'
},
{
name: '昆明巫家坝国际机场',
pic: '/static/logo.png'
}
]
}, {
'letter': 'L',
'data': [{
name: '拉萨贡嘎机场',
pic: '/static/logo.png'
},
{
name: '兰州中川机场',
pic: '/static/logo.png'
},
{
name: '丽江三义机场',
pic: '/static/logo.png'
},
{
name: '黎平机场',
pic: '/static/logo.png'
},
{
name: '连云港白塔埠机场',
pic: '/static/logo.png'
}
]
}, {
'letter': 'M',
'data': [{
name: '满洲里西郊机场',
pic: '/static/logo.png'
},
{
name: '绵阳南郊机场',
pic: '/static/logo.png'
},
{
name: '漠河古莲机场',
pic: '/static/logo.png'
},
{
name: '牡丹江海浪机场',
pic: '/static/logo.png'
}
]
}, {
'letter': 'N',
'data': [{
name: '南昌昌北国际机场',
pic: '/static/logo.png'
},
{
name: '南充高坪机场',
pic: '/static/logo.png'
},
{
name: '南京禄口国际机场',
pic: '/static/logo.png'
},
{
name: '南宁吴圩机场',
pic: '/static/logo.png'
}
]
}, {
'letter': 'O',
'data': []
}, {
'letter': 'P',
'data': [{
name: '普洱思茅机场',
pic: '/static/logo.png'
}]
}, {
'letter': 'Q',
'data': [{
name: '齐齐哈尔三家子机场',
pic: '/static/logo.png'
},
{
name: '秦皇岛山海关机场',
pic: '/static/logo.png'
},
{
name: '青岛流亭国际机场',
pic: '/static/logo.png'
},
{
name: '衢州机场',
pic: '/static/logo.png'
}
]
}, {
'letter': 'R',
'data': [{
name: '日喀则和平机场',
pic: '/static/logo.png'
}]
}, {
'letter': 'S',
'data': [{
name: '三亚凤凰国际机场',
pic: '/static/logo.png'
},
{
name: '汕头外砂机场',
pic: '/static/logo.png'
},
{
name: '上海虹桥国际机场',
pic: '/static/logo.png'
},
{
name: '上海浦东国际机场',
pic: '/static/logo.png'
}
]
}, {
'letter': 'T',
'data': [{
name: '塔城机场',
pic: '/static/logo.png'
},
{
name: '太原武宿国际机场',
pic: '/static/logo.png'
},
{
name: '台州路桥机场 (黄岩机场)',
pic: '/static/logo.png'
},
{
name: '唐山三女河机场',
pic: '/static/logo.png'
}, {
name: '腾冲驼峰机场',
pic: '/static/logo.png'
},
{
name: '天津滨海国际机场',
pic: '/static/logo.png'
},
{
name: '通辽机场',
pic: '/static/logo.png'
}
]
}, {
'letter': 'U',
'data': []
}, {
'letter': 'V',
'data': []
}, {
'letter': 'W',
'data': [{
name: '万州五桥机场',
pic: '/static/logo.png'
},
{
name: '潍坊机场',
pic: '/static/logo.png'
},
{
name: '威海大水泊机场',
pic: '/static/logo.png'
},
{
name: '文山普者黑机场',
pic: '/static/logo.png'
}, {
name: '温州永强国际机场',
pic: '/static/logo.png'
},
{
name: '乌海机场',
pic: '/static/logo.png'
},
{
name: '武汉天河国际机场',
pic: '/static/logo.png'
}
]
}, {
'letter': 'X',
'data': [{
name: '西安咸阳国际机场',
pic: '/static/logo.png'
},
{
name: '西昌青山机场',
pic: '/static/logo.png'
},
{
name: '锡林浩特机场',
pic: '/static/logo.png'
},
{
name: '西宁曹家堡机场',
pic: '/static/logo.png'
}, {
name: '西双版纳嘎洒机场',
pic: '/static/logo.png'
},
{
name: '厦门高崎国际机场',
pic: '/static/logo.png'
},
{
name: '香港国际机场',
pic: '/static/logo.png'
}
]
}, {
'letter': 'Y',
'data': [{
name: '延安二十里堡机场',
pic: '/static/logo.png'
},
{
name: '盐城机场',
pic: '/static/logo.png'
},
{
name: '延吉朝阳川机场',
pic: '/static/logo.png'
},
{
name: '烟台莱山国际机场',
pic: '/static/logo.png'
}, {
name: '宜宾菜坝机场',
pic: '/static/logo.png'
},
{
name: '宜昌三峡机场',
pic: '/static/logo.png'
},
{
name: '伊春林都机场',
pic: '/static/logo.png'
}
]
}, {
'letter': 'Z',
'data': [{
name: '湛江机场',
pic: '/static/logo.png'
},
{
name: '昭通机场',
pic: '/static/logo.png'
},
{
name: '郑州新郑国际机场',
pic: '/static/logo.png'
},
{
name: '芷江机场',
pic: '/static/logo.png'
}, {
name: '重庆江北国际机场',
pic: '/static/logo.png'
},
{
name: '中卫香山机场',
pic: '/static/logo.png'
},
{
name: '舟山朱家尖机场',
pic: '/static/logo.png'
}
]
}]
}
},
mounted() {
this.getHeight()
},
methods: {
bindClick(e) {
console.log(e);
},
// 更多菜单
menus() {
},
getHeight() {
let that=this
uni.getSystemInfo({
success: function(res) {
let obj = uni.createSelectorQuery().select('.title_bar')
obj.boundingClientRect(function(data) {
// data - 各种参数
that.height=res.windowHeight-data.height
}).exec()
}
});
}
}
}
</script>
<style>
.indexlist {
position: relative;
}
</style>