请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

``
图片描述

<template>
  <div class="list" ref="wrapper">
    <div>
      <div class="list-area">
        <div class="area-title border-topbottom">当前城市</div>
        <div class="button-list">
          <div class="botton-wrapper">
            <div class="button">{{this.city}}</div>
          </div>
        </div>
      </div>
      <div class="list-area">
        <div class="area-title border-topbottom">热门城市</div>
        <div class="button-list">
          <div class="botton-wrapper"
          v-for="item of hotCities"
          :key="item.id"
          @click="handleCityClick(item.name)">
            <div class="button" >{{item.name}}</div>
          </div>
        </div>
      </div>
      <div class="list-area"
      v-for="(item,key) of cities"
      :key="key"
      :ref="key"
      >
        <div class="area-title border-topbottom">{{key}}</div>
        <div class="item-list">
          <div class="item border-bottom"
          v-for="innerItem of item"
          :key="innerItem.id"
          @click="handleCityClick(innerItem.name)"
          >{{innerItem.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import Bscroll from 'better-scroll'
export default {
  name: 'CityList',
  props: {
    hotCities: Array,
    cities: Object,
    letter: String
  },
  computed: {
    ...mapState(['city'])
  },
  data () {
    return {
      scroll: ''
    }
  },
  methods: {
    handleCityClick (city) {
      this.ChangeCity(city)
      this.$router.push('/')
    },
    ...mapActions(['ChangeCity'])
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.warpper, {click: true})
  },
  watch: {
    letter () {
      if (this.letter) {
        const ele = this.$refs[this.letter][0]
        this.scroll.scrollToElement(ele)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  @import '~styles/varibles.styl'
  .border-topbottom
    &:before
      border-color #ccc
  .border-bottom
    &:before
      border-color #ccc
    &:after
      border-color #ccc
  .list
    width 100%
    clear both
    position absolute
    left 0
    top 7.6rem
    right 0
    bottom 0
    overflow hidden
    .list-area
      text-indent 1rem
      .area-title
        line-height 2rem
        height 2rem
        font-size 1.2rem
        color $darkTextColor
        background #EEEEEE
      .button-list
        overflow hidden
        padding .5rem 3rem .5rem .5rem
        .botton-wrapper
          float left
          width 32%
          margin .2rem
          .button
            margin .1rem
            padding .2rem 0
            border .1rem solid #ccc
            text-align center
            font-size 1.4rem
      .item-list
         .item
           font-size 1.4rem
           padding .5rem 0
</style>

```

添加回答

已采纳回答

看了你重新编辑发上来的代码就找到了问题,你ref属性赋值的是wrapper

<div class="list" ref="wrapper">

与你使用的时候的值(warpper)不对应,所以导致了报错,因为它没有获取到对应的实例对象

 mounted () {
    this.scroll = new Bscroll(this.$refs.warpper, {click: true})
  },


2020-10-11 22:25:52
  • 提问者 一如忘词 #1
    那怎么改呢
    2020-10-11 22:33:57
  • 提问者 一如忘词 #2
    非常感谢!谢谢谢
    2020-10-11 22:48:59

1回答

Vue2.5-2.6-3.0 开发去哪儿网App 从零基础入门到实战项目开发

难度中级
时长18小时30分钟
人数9004
好评度99.9%

课程紧跟Vue版本迭代,最新补充Vue3.0新章节,带你第一时间掌握Vue3.0新特性

讲师

Dell Web前端工程师

BAT资深前端工程师,负责数据平台技术研发。曾任去哪儿网高级前端工程师,主导去哪儿网内部前端监控系统设计,负责去哪儿网门票用户端的前端设计开发。曾任国内知名培训机构高级前端讲师,负责React,Angular,Vue,Hybrid,RN的课程讲授,具备丰富前端授课经验。对优雅编程及工程化有深度思考及见解,教会你写代码,同时帮助你把代码写的更漂亮!

意见反馈 帮助中心 APP下载
官方微信