vue 城市定位组件

 

<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-