<style scope> #cityFullScreen{ height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; } .van-nav-bar .van-icon{ color: black; font-weight: 600; } .item_detail{ min-height: 100vh; background-color: #fff; } .selectCity_title { margin: 10pt 10pt; padding: 10pt 0; border-bottom: 1px solid #ccc; } .selectCity_title img { width: 11pt; height: 12pt; vertical-align: middle; position: relative; top: -1pt; } .selectCity_alphabet { position: fixed; top: 25%; right: 10px; } .city_item_list { height: 40px; line-height: 40px; background-color: #ccc; } .fastSelActive { color: #F28300; } </style> <template> <div class="item_detail" id="cityFullScreen" ref="cityFullScreen"> <div class="selectCity_title"> <img src="../../assets/images/shop/ic_gps@2x.png" alt=""> <span style="margin-left: 10pt;font-size: 12pt;color:rgba(0, 0, 0, 1);">武汉</span> <span style="margin-left: 10pt;font-size: 9pt;color:rgba(0, 0, 0, 0.5);">GPS定位</span> </div> <div> <div :key="index" v-for="(item, index) in cityList" ref="allCityBar"> <div :id="item.id" class="city_item_list">{{item.name}}</div> <div v-for="(list, key) in item.content" :key="key"> <div style="height: 40px;line-height: 40px;"> {{list.name}} </div> </div> </div> </div> <div class="selectCity_alphabet"> <ul v-for="(item, index) in leftNav" :key="index"> <li :class="index === curCityListIndex ? 'fastSelActive': ''" @click="goAnchor(item)">{{item.name}}</li> </ul> </div> </div> </template> <script> export default { name: 'city', data() { return { cityList: [ { name: '标题A', id: 'A', content: [ { name: '文本' }, { name: '文本' }, { name: '文本' }, { name: '文本' }, { name: '文本' }, { name: '文本' } ] }, { name: '标题B', id: 'B', content: [ { name: '文本' }, { name: '文本' }, { name: '文本' }, { name: '文本' }, { name: '文本' }, { name: '文本' } ] }, { name: '标题C', id: 'C', content: [ { name: '文本' }, { name: '文本' }, { name: '文本' }, { name: '文本' }, { name: '文本' }, { name: '文本' } ] }, { name: '标题D', id: 'D', content: [ { name: '文本' }, { name: '文本' }, { name: '文本' } ] }, { name: '标题E', id: 'E', content: [ { name: '文本' }, { name: '文本' }, { name: '文本' }, { name: '文本' }, { name: '文本' }, { name: '文本' } ] }, { name: '标题F', id: 'F', content: [ { name: '文本' }, { name: '文本' }, { name: '文本' } ] } ], // 所有城市 curCityListIndex: 0, // 点击右边导航栏选中 leftNav: [ { name: 'A', id:0 }, { name: 'B', id:1 }, { name: 'C', id:2 }, { name: 'D', id:3 }, { name: 'E', id:4 }, { name: 'F', id:5 }, ], // 右边导航栏数据 listHeight: [], // 每组城市的高度 scrollY: '' // 滑动 } }, created() { // this.calculateHeight(); }, mounted() { this.calculateHeight() this.$refs.cityFullScreen.addEventListener('scroll', this.handleScroll, true); // 监听（绑定）滚轮滚动事件 }, watch: { }, destroyed: function () { this.$refs.cityFullScreen.removeEventListener('scroll', this.handleScroll); // 离开页面清除（移除）滚轮滚动事件 }, methods: { handleScroll () { // console.log(this.$refs.cityFullScreen.scrollTop) this.scrollY = this.$refs.cityFullScreen.scrollTop // console.log(this.scrollY) const listHeight = this.listHeight // 当滚动到顶部 if (this.scrollY < 0) { this.curCityListIndex = 0 return; } // 在中间部分滚动 for (let i = 0; i < listHeight.length - 1; i++) { let height = listHeight[i] let height2 = listHeight[i + 1] // 思路 拿数组里面的两个值进行范围比较如 0 - 300 是A 300-600 是B if (this.scrollY >= height && this.scrollY < height2) { // console.log('-----------合格----------') // console.log(listHeight[i]) this.curCityListIndex = i } } }, // 右边导航栏点击 goAnchor(type) { // console.log(type) this.curCityListIndex = type.id document.querySelector("#" + type.name).scrollIntoView(true); }, // 计算每个城市区块的高度 calculateHeight() { this.$nextTick(() => { let cityList = this.$refs.allCityBar let height = 0; this.listHeight.push(height); for (let i = 0; i < cityList.length; i++) { let item = cityList[i]; height += item.clientHeight; // 可见高度 this.listHeight.push(height); } console.log(this.listHeight) }); }, } } </script>
github地址：https://github.com/Aliceco/vueSelectCity-
