vue项目中使用better-scroll来实现滚动的例子，2024年最新头条技术面试总共几轮

}

},

methods: {

// 初始化滚动

_initScroll() {

// 列表显示之后创建

new BScroll(‘.menu-wrapper’, {

click: true

})

this.foodsScroll = new BScroll(‘.foods-wrapper’, {

probeType: 2, // 因为惯性滑动不会触发

click: true

})

// 给右侧列表绑定scroll监听

this.foodsScroll.on(‘scroll’, ({x, y}) => {

console.log(x, y)

this.scrollY = Math.abs(y)

})

// 给右侧列表绑定scroll结束的监听

this.foodsScroll.on(‘scrollEnd’, ({x, y}) => {

console.log(‘scrollEnd’, x, y)

this.scrollY = Math.abs(y)

})

},

// 初始化tops

_initTops() {

// 1. 初始化tops

const tops = []

let top = 0

tops.push(top)

// 2. 收集

// 找到所有分类的li

const lis = this.$refs.foodsUl.getElementsByClassName(‘food-list-hook’)

Array.prototype.slice.call(lis).forEach(li => {

top += li.clientHeight

tops.push(top)

})

// 3. 更新数据

this.tops = tops

console.log(tops)

},

clickMenuItem(index) {

// console.log(index)

// 使用右侧列表滑动到对应的位置

// 得到目标位置的scrollY

const scrollY = this.tops[index]

// 立即更新scrollY(让点击的分类项成为当前分类)

this.scrollY = scrollY

// 平滑滑动右侧列表

this.foodsScroll.scrollTo(0, -scrollY, 300)

},

// 显示点击的food

showFood (food) {

// 设置food

this.food = food

// 显示food组件 (在父组件中调用子组件对象的方法)

this.$refs.food.toggleShow()

}

},

components: {

CartControl,

Food,

ShopCart

}

}