4回答

慕雪3103829

2020-12-17

第一次可以是因为我们在初始化它的时候，父元素和子元素的内容已经正确渲染了。第二次是子元素或者父元素  结构发生改变的时候，必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常

mounted() {

      this.scroll = new Bscroll(this.$refs.search)

    },

    updated() {

      this.scroll.refresh()

    }

可以添加

updated() {

      this.scroll.refresh()

    }

来解决

2

0

huaweichen

2020-07-13

<template>
   <div>
       <div class="search">
           <input class="search-input" type="text" placeholder="输入城市名或拼音" v-model="keyword">
       </div>
       <div class="search-content" ref="search">
           <ul>
               <li class="search-item border-bottom" v-for="item of list">{{ item.name }}</li>
               <li class="search-item border-bottom">没有找到匹配数据</li>
           </ul>
       </div>
   </div>
</template>
<script>
 import BScroll from 'better-scroll'
 export default {
   name: 'CitySearch',
   props: {
     cities: Object,
   },
   mounted () {
     this.scroll = new BScroll(this.$refs.search)
   },
   data () {
     return {
       keyword: '',
       list: [],
       timer: null,
     }
   },
   watch: {
     keyword () {
       if (this.timer) {
         clearTimeout(this.timer)
       }
       if (!this.keyword) {
         this.list = []
         return
       }
       this.timer = setTimeout(() => {
         const result = []
         for (let i in this.cities) {
           this.cities[i].forEach((value) => {
             if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
               result.push(value)
             }
           })
         }
         this.list = result
       }, 100)
     },
   },
 }
</script>
<style scoped>
   @import '~styles/variables.styl'
   .search
       padding 0 .1rem
       height .72rem
       background $bgColor
       .search-input
           height .62rem
           text-align center
           box-sizing border-box
           padding 0 .1rem
           border-radius .06rem
           width 100%
           line-height .62rem
           color #666666
   .search-content
       z-index 1
       position absolute
       top 1.58rem
       left 0
       right 0
       botton 0
       overflow hidden
       background #eeeeee
       .search-item
           line-height .62rem
           padding-left .2rem
           color #666666
           background #ffffff
</style>

1

1

mkzlog

把mounted换成updated就可以滚动了

2020-09-03

共1条回复

Dell

2019-11-10

看下代码，发出来

1

3

huaweichen

回复

Dell

是的呢，老师。

2020-07-19

共3条回复

Dell

2020-07-25

页面是否可以渲染出来？

0

0