89 lines
2.3 KiB
Vue
89 lines
2.3 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="container">
|
||
<!-- 建议放在外层 -->
|
||
<view class="contentnav">
|
||
当前城市
|
||
</view>
|
||
<!-- 不建议放在层层嵌套的view中，除非您清楚知道自己为什么需要这么做 -->
|
||
</view>
|
||
<u-index-list class="container" :index-list="indexList" style="height: 100%;" @select='clickSelect'
|
||
:scrollTop="scrollTop">
|
||
<view v-for="(item, index) in itemArr" :key="index" style="height: 100%;">
|
||
<!-- #ifdef APP-NVUE -->
|
||
<u-index-anchor :id="item.id" :index="item.id" :text="indexList[index]"></u-index-anchor>
|
||
<!-- #endif -->
|
||
<u-index-item style="height: 100%;">
|
||
<!-- #ifndef APP-NVUE -->
|
||
<u-index-anchor :id="item.id" :index="item.id" :text="indexList[index]"></u-index-anchor>
|
||
<!-- #endif -->
|
||
<!-- <view class="list-cell">
|
||
{{item.cities}}
|
||
</view> -->
|
||
<view class="list-cell" v-for="(cell,index1) in item.cities" :key="index1">
|
||
{{cell.name}}
|
||
</view>
|
||
</u-index-item>
|
||
</view>
|
||
</u-index-list>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import city from '@/common/js/city.json'
|
||
export default {
|
||
data() {
|
||
return {
|
||
scrollTop: 0,
|
||
indexList: city.alphabet,
|
||
itemArr: city.cityList
|
||
}
|
||
},
|
||
methods: {
|
||
clickSelect(e) {
|
||
//从当前位置到达目标位置
|
||
console.log(">>>当前节点", e, this.scrollTop)
|
||
try {
|
||
uni.createSelectorQuery().select('#' + e).boundingClientRect((data) => {
|
||
console.log(">>data", data)
|
||
//目标位置的节点：类或者id
|
||
uni.createSelectorQuery().select('.container').boundingClientRect((res) => {
|
||
console.log(data, res)
|
||
console.log(">>res.top", res.top)
|
||
//最外层盒子的节点：类或者id
|
||
this.$nextTick(() => {
|
||
uni.pageScrollTo({
|
||
scrollTop: data.top - res.top,
|
||
// selector: '#' + e,
|
||
duration: 100 //app端这个必须设置成0
|
||
})
|
||
})
|
||
})
|
||
.exec()
|
||
})
|
||
.exec()
|
||
} catch (e) {
|
||
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 使用>>>来穿透组件边界 */
|
||
.content {
|
||
.list-cell {
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
padding: 10px 24rpx;
|
||
overflow: hidden;
|
||
color: #323233;
|
||
font-size: 14px;
|
||
line-height: 24px;
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
</style> |