{
      "id": 151,
      "name": "鞍山",
      "pinyin": "anshan",
      "acronym": "as",
      "rank": "C",
      "firstChar": "A"
    }

// 获取城市数据，city为我爬取的信息
app.get('/', function (req, res) {
    res.send(city);
    res.end()
});
// 调用新浪的接口返回定位
app.get('/nowcity', function (req, res) {
    let getIpInfo = function (cb) {
        var url = 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=json';
        http.get(url, function (res) {
            var code = res.statusCode;
            if (code == 200) {
                res.on('data', function (data) {
                    try {
                        cb(JSON.parse(data));
                    } catch (err) {
                        console.log(err)
                    }
                });
            }
        }).on('error',function(e){
            cb({
                city: "北京",
                country: "中国",
                province: "北京",
            })
        })
    };
    getIpInfo(function (msg) {
        let nowcity = msg
        res.send(nowcity)
        res.end()
    })
});

// 先引入文件
import Search from 'components/Search'
import Scroll from 'base/Scroll.vue'
import PositionBox from 'components/PositionBox'
import CityList from 'components/CityList'
import NavList from 'components/NavList'
import MaskBox from 'components/MaskBox'
import SearchList from 'components/SearchList'
// 然后在父组件中注册
components: {
    'search': Search,
    'scroll': Scroll,
    'position-box': PositionBox,
    'nav-list': NavList,
    'city-list': CityList,
    'mask-box': MaskBox,
    'search-list': SearchList
}
// 使用
<search @txtdata="searchText" :clearText="clearSearch"></search>

    <search @txtdata="searchText" :clearText="clearSearch"></search>

props: {
    clearText: Boolean
}
// 带默认参数的
props: {
    clearText: {
      type: Boolean,
      default:false
    }
}

// 点击列表触发改变定位的事件

// 搜索框内容
    searchText (text) {
    // text即传递过来的参数
    }

if (this.timer) {
   clearTimeout(this.timer) // 清除定时器
}
this.timer = setTimeout(() => {
   this.$emit('txtdata', this.searchText)
}, 300)

export function getSearchList (text, list) {
  let reg1 = /^\w+$/g //检测是否为字母
  let reg2 = new RegExp(`^${text}`, 'g') //检测模板text
  let reg3 = new RegExp('^[\\u4E00-\\u9FFF]{1,}$', 'g') //检测是否为汉字
  let resList = []
    // 当text为字母时
  if (text.match(reg1)) {
    for (let i = 0, len1 = list.length; i < len1; i++) {
      for (let j = 0, len2 = list[i][1].length; j < len2; j++) {
    // 筛选满足这个正则的
        if (list[i][1][j].pinyin.match(reg2)) {
          resList.push(list[i][1][j])
        }
      }
    }
  } else {
    // 同上
    if (reg3.test(text)) {
      for (let i = 0, len1 = list.length; i < len1; i++) {
        for (let j = 0, len2 = list[i][1].length; j < len2; j++) {
          if (list[i][1][j].name.match(reg2)) {
            resList.push(list[i][1][j])
          }
        }
      }
    }
  }
  return resList
}

//匹配一个字符，这个字符可以是0-9中的任意一个 
var reg1 = /[0123456789]/ 
//匹配一个字符，这个字符可以是0-9中的任意一个 
var reg2 = /[0-9]/ 
//匹配一个字符，这个字符可以是a-z中的任意一个 
var reg3 = /[a-z]/ 
//匹配一个字符，这个字符可以是大写字母、小写字母、数字中的任意一个 
var reg3 = /[a-zA-Z0-9]/
//匹配一个字符，这个字符可以是汉字的任意一个 
var reg4 = /[\\u4E00-\\u9FFF]/

<div ref="wrapper" class="scroll">
</div>
//  此时this.$refs('wrapper')就代表了这个div

<div>
  <h2>我是子组件的标题</h2>
  <slot>
    只有在没有要分发的内容时才会显示。
  </slot>
</div>

<div>
  <h1>我是父组件的标题</h1>
  <my-component>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </my-component>
</div>

<div>
  <h1>我是父组件的标题</h1>
  <div>
    <h2>我是子组件的标题</h2>
    <p>这是一些初始内容</p>
    <p>这是更多的初始内容</p>
  </div>
</div>

<!--父组件-->
<scroll :data="citylist" ref="suggest" :probeType="3" :listenScroll="true" @distance="distance" @scrollStore="scrollStore">
      <div>
        <position-box :chooseCity="chooseCity" :orientate="nowCity" :historyCityArr="historyCityArr" @changeCity="changeCity"></position-box>
        <city-list :citylist="citylist" :elementIndex="elementIndex" @positionCity="changeCity" @singleLetter="singleLetter"></city-list>
      </div>
</scroll>
<!--子组件-->
<div ref="wrapper" class="scroll">
    <slot></slot>
</div>

this.scroll = new BScroll(this.$refs.wrapper, {
        probeType: this.probeType,
        scrollY: true, // 滚动方向为Y轴
        click: true, // 是否派发click事件，通常判断浏览器派发的click还是betterscroll派发的click，可以用event._constructed，若是bs派发的则为true
        momentum: true, // 当快速滑动时是否开启滑动惯性
        bounce: false, // 是否启用回弹动画效果
        bounceTime: 700, // 弹力动画持续的毫秒数
        deceleration: 0.001, // 滚动动量减速越大越快，建议不大于0.01
        momentumLimitTime: 300, // 符合惯性拖动的最大时间
        momentumLimitDistance: 15, // 符合惯性拖动的最小拖动距离
        resizePolling: 60 // 重新调整窗口大小时，重新计算better-scroll的时间间隔
})

localStorage.setItem('historyCityArr', arr)
localStorage.getItem('historyCityArr')

    <transition name="flag">
      <div class="nowFlag" v-if="flag">{{flagText}}</div>
    </transition>

　　.flag-leave-active
  　　transition all 1s
　　.flag-leave-to
  　　opacity 0

<!--父组件-->
<search @txtdata="searchText" :clearText="clearSearch"></search>
<!--子组件-->
<div class="search-box">
    <div class="ipt-box">
      <input type="text" class="ipt" placeholder="城市名称/拼音" @keydown="entry()" v-model="searchText" />
      <div class="icon-box">
        <i class="iconfont icon-sousuo icon"></i>
      </div>
    </div>
</div>

//子组件js  
methods: {
    // 延时搜索
    entry () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.$emit('txtdata', this.searchText)
      }, 300)
    }
  },
  watch: {
    // 清除搜索内容
    clearText (val) {
      if (val) {
        this.searchText = ''
        this.entry()
      }
    }
  }

<!--父组件模块-->
<position-box :chooseCity="chooseCity" :orientate="nowCity" :historyCityArr="historyCityArr" @changeCity="changeCity"></position-box>
<!--子组件模块-->
  <div class="position-box">
    <div class="choose">
      <span>你已选择：{{chooseCity}}</span>
    </div>
    <div class="hostory">
      <p>定位/最近访问</p>
      <div class="citybox">
        <button @click="changeCity(orientate)">
          <i class="iconfont icon-dingwei icon"></i>{{orientate}}
        </button>
        <button @click="changeCity(item)" v-for="item in historyCityArr" :key="item">{{item}}</button>
      </div>
    </div>
    <div class="hot">
      <p>热门城市</p>
      <div class="citybox">
        <button v-for="city in hotCitys" :key="city" @click="changeCity(city)">{{city}}</button>
      </div>
    </div>
  </div>

　　　　axios.get('http://localhost:1234/nowcity').then((res) => {
        this.nowCity = res.data.city
        if (!this.choiceCity && !this.choiceCityName) {
          this.choiceCity = this.nowCity
          this.choiceCityName = this.nowCity
        }
      }, () => {
        this.nowCity = '北京'
        if (!this.choiceCity && !this.choiceCityName) {
          this.choiceCity = this.nowCity
          this.choiceCityName = this.nowCity
        }
      })

    setHistory (arr) {
      localStorage.setItem('historyCityArr', arr)
    },
    // 从本地取
    getHistory () {
      let history = localStorage.getItem('historyCityArr')
      if (!history) {
        this.historyCityArr = []
      } else {
        this.historyCityArr = history.split(',')
      }
    },
    // 存到本地,正在查看的城市
    setCity (name) {
      localStorage.setItem('seeCity', name)
    },
    // 从本地取，,正在查看的城市
    getCity () {
      let name = localStorage.getItem('seeCity')
      if (!name) {
        this.choiceCity = ''
        this.choiceCityName = ''
      } else {
        this.choiceCity = name
        this.choiceCityName = name
      }
    }

<!--父组件模块-->
<city-list :citylist="citylist" :elementIndex="elementIndex" @positionCity="changeCity" @singleLetter="singleLetter"></city-list>
<!--子组件模块-->
<div class="lists">
    <div v-for="citys in citylist" :key="citys[0]" :dataNum="citys[1].length">
      <p class="city-title" :ref="citys[0]">{{citys[0]}}</p>
      <p class="city-item" v-for="city in citys[1]" :key="city.id" @click="changeCity(city.name)">{{city.name}}</p>
    </div>
  </div>

// 父组件
singleLetter (dom) {
   this.$refs.suggest.scrollToElement(dom, 200, false, false)
}
// 子组件
elementIndex (val) {
   if (val === '顶') {
     return false
   }
   this.$emit('singleLetter', this.$refs[val][0])
}

<!--父组件模块-->
<mask-box v-if="maskShow" :message="maskMessage" @chooseing="chooseResult"></mask-box>
<!--子组件模块-->
<div class="mask-box">
    <div class="mask-body"></div>
    <div class="btn-box">
      <div class="message">
        <p>{{message}}</p>
      </div>
      <div class="btn-left" @click="chooseTrue()">
        <p>确定</p>
      </div>
      <div class="btn-right" @click="chooseFalse()">
        <p>取消</p>
      </div>
    </div>
  </div>

　　chooseTrue () {
      this.$emit('chooseing', true)
    },
    chooseFalse () {
      this.$emit('chooseing', false)
    }

// 是否确认切换定位
    chooseResult (res) {
      if (!res) {
        this.maskClose() // 不切换，仅关闭弹窗
      } else {
        this.choiceCityName = this.choiceCity
        this.local()
        this.associationShow = false // 关闭搜索框（在搜索状态下）
        this.clearSearch = true // 清除输入框的字（在搜索状态下）
        // 当确认后滚动到顶部
        this.$refs.suggest.scrollTo(0, 0, 200)
        this.maskClose()
      }
    }

<!--父组件模块-->
    <transition name="list">
      <search-list v-if="associationShow" :searchListContent="searchListContent" @changeName="changeCity"></search-list>
    </transition>
<!--子组件模块-->
  <div class="listbody">
    <scroll :data="searchListContent">
      <div>
        <city-item :searchListContent="searchListContent" @changeName="changeCity"></city-item>
      </div>
    </scroll>
  </div>

<!--父组件模块-->
<nav-list :navList="cityIndexList" @toElement="toElement" :flagText="flagText"></nav-list>
<!--子组件模块-->
<div class="navbody">
   <div class="navList" @touchstart.stop.prevent="start" @touchmove.stop.prevent="move">
      <div :class="navClass(item)" :data-name="item" v-for="item in navList" :key="item">
        {{item}}
      </div>
   < /div>
</div>

    start (e) {
      let item = handleDomData(e.target, 'data-name')
      this.touch.start = e.touches[0].pageY
      this.touch.startIndex = getIndex(this.navList, item)
      this.scrollToElement(item)
    }

    move (e) {
      this.touch.end = e.touches[0].pageY
      let distance = this.touch.end - this.touch.start
      this.touch.endIndex = Math.min(Math.max(this.touch.startIndex + Math.floor((distance + 10) / 20), 0), 22)
      this.scrollToElement(this.navList[this.touch.endIndex])
    }

// 获取或者给dom属性赋值
export function handleDomData (el, name, val) {
  if (val) {
    return el.setAttribute(name, val)
  } else {
    return el.getAttribute(name)
  }
}
// 获取每一个字母在数组中对应的index
export function getIndex (arr, query) {
  let key
  arr.map((val, index) => {
    if (val === query) {
      key = index
      return false
    }
  })
  return key
}

    <transition name="flag">
      <div class="nowFlag" v-if="flag">{{flagText}}</div>
    </transition>

      // 监听scroll事件
      if (this.listenScroll) {
        // 滚动开始时触发
        this.scroll.on('scrollStart', () => {
          this.$emit('scrollStore', true)
        })
        // pos为位置参数
        this.scroll.on('scroll', (pos) => {
          this.$emit('distance', Math.abs(pos.y))
          this.$emit('scrollStore', true)
        })
        // 滚动结束
        this.scroll.on('scrollEnd', () => {
          this.$emit('scrollStore', false)
        })
      }

    // 根据滑动距离显示字母牌上的字
    distance (val) {
      for (let i = 0, len = this.arrHeight.length; i < len; i++) {
        if (val < this.arrHeight[i]) {
          this.flagText = this.cityIndexList[i]
          return false
        }
      }
    }
    // 高度数组来源
    // 计算链接每一部分的高度
    export function getDistance (arr) {
      let titleHeight = 30
      let itemHeight = 35
      let distanceArr = []
      arr.map((item) => {
        distanceArr.push(titleHeight + itemHeight * item[1].length)
      })
      return distanceArr
    }