better-scroll 滚动问题

Question

代码地址 ：https://gitee.com/msi1979/qunar/tree/city-ajax
未对接数据时，正常，对接数据后开始正常可以滚动，但点箭头回首页再进city 页面就无法滚动。但有时又可以，多数情况下无法滚动。 不知是哪弄错了，请老师帮忙看看，是哪写错了
看了 其他学员对这块提的问题，试了下，也未能解决。但是修改代码，再运行，又可以，以为能正常滚动，但点箭头回首页再进city 页面还是无法滚动。

Answer 1

Dell 2021-09-27 00:15:23

把cityList的组件代码发上来

• 提问者 爱吃鱼的羊 #1

  上面的地址可以访问了

• 提问者 爱吃鱼的羊 #2

  <script>
  import BScroll from "better-scroll";
  export default {
  	name: "CityList",
  	props:{
  		cities:Object,
  		hot:Array,
  		letter:String,
  	},
  	methods: {
  /*		initScroll() {
  			this.$nextTick(() => {
  				this.scroll = new BScroll(this.$refs.wrapper, {})
  			})
  		},*/
  		initScroll() {
  			this.$nextTick(() => {
  				if (!this.scroll) {
  					this.scroll = new BScroll(this.$refs.wrapper, {
  					});
  				} else {
  					this.scroll.refresh(); // 重新计算 better-scroll，当 DOM 结构发生变化的时确保滚动效果正常
  				}
  			});
  		},
  	},
  	watch: {
  		letter () {
  /*			console.log(this.letter)
  			console.log(this.$refs)
  			console.log(this.$refs[this.letter])
  			console.log(this.$refs[this.letter][0])*/
  			if (this.letter) {
  				const element = this.$refs[this.letter][0];
  				this.scroll.scrollToElement(element);
  			}
  		},
  	},
  	mounted() {
  		setTimeout(()=>{
  			this.initScroll()
  		},100)
    
  	},
  }
  </script>

• Dell 回复 提问者 爱吃鱼的羊 #3

  updated 生命周期函数里加一个 this.scroll.refresh();

点开查看后面3条评论