利用better-Scroll插件來實現移動端滾動效果記得先安裝再引入

<div class="core-container" ><div class="wrapper" style="height:500px;overflow:hidden"><div class="scroll-content"><div class="scroll-item" v-for="(item, index) in listsd" :key="index" @click="clickHandler(index)" style="fontSize:80px":style="{color:index === currentIndex ? 'red':''}">{{item}}</div></div></div></div><div class="core-container"><div class="scroll-wrapper" ref="scroll" style="height:600px;overflow:hidden"><div class="scroll-content" ref="list"><div class="scroll-item" v-for="(item, index) in emojis" :key="index">{{item}}</div></div></div></div> import BScroll from 'better-scroll' data(){return{listsd:['1','2','3','4','5'],scrollY:0,tops: [],emojis: ['😀 😁 😂 🤣 😃','😄 😅 😆 😉 😊','😫 😴 😌 😛 😜','👆🏻 😒 😓 😔 👇🏻','😑 😶 🙄 😏 😣','😞 😟 😤 😢 😭','🤑 😲 🙄 🙁 😖','👍 👎 👊 ? 🤛',],scrollY:0, //滑動的時候的值tops: [], //存放盒子高度的數組} }, mounted() {this.init() //初始化betterscroll插件this.initTops() },computed:{currentIndex(){ //這里的currenIndex是為了實現右邊滑動到哪里，左邊那個選項高亮const {scrollY,tops} = thisconst index = tops.findIndex((top,index) =>{return scrollY >= top && scrollY<tops[index + 1]//滑動的時候數值大于等于tops數組第一個小于tops數組第二個，就讓第一個選項高亮,大于等于數組第二個小于數組第三個就讓第二個選項高亮})console.log(index)return index}},methods: {init() {this.bs = new BScroll('.scroll-wrapper', {probeType: 3,click: true})const foodsScroll = new BScroll('.wrapper', {probeType: 3,click: true})this.bs.on('scroll',({x,y}) =>{this.scrollY = Math.abs(y) //把獲取到的y值賦給scrollY// console.log(this.scrollY)})// this.bs.on('scrollStart', () => { //滾動開始事件// console.log('scrollStart-')// })// this.bs.on('scroll', ({ y }) => { //監聽滾動事件// console.log('scrolling-')// })this.bs.on('scrollEnd', ({x,y}) => { //滾動結束事件this.scrollY = Math.abs(y)})},initTops(){const tops = []let top = 0tops.push(top)//收集每個item的盒子高度依次累加，我這里每個盒子175px,//所以數組[0, 175, 350, 525, 700, 875, 1050, 1225, 1400, 1575, 1750, 1925, 2100, 2275, 2450, 2625, 2800, 2975, 3150, 3325, 3500, 3675, 3850, 4025, 4200, 4375, 4550, 4725, 4900, 5075, 5250, 5425]const lis = this.$refs.list.getElementsByClassName('scroll-item')//偽數組Array.from(lis).forEach(li=>{top += li.clientHeighttops.push(top)})console.log(tops)//更新數據this.tops = tops},clickHandler (index) {//點擊左側側列表滑動到對應的位置const y = -this.tops[index]this.bs.scrollTo(0,y,100) //持續時間0.1s}}

總結

以上是生活随笔為你收集整理的vue中实现美团双级联动菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。