The official documentation

<template> <div> <div class="goods"> <div class="menu-wrapper" ref="menuWrapper"> <ul> <li class="menu-item" :class="{current:index===currentIndex}" v-for="(good,index) in shopGoods" :key="index" @click.prevent="selectMenu(index)"> <span class="text bottom-border-1px"> <img class="icon" :src="good.icon" v-if="good.icon"> {{good.name}} </span> </li> </ul> </div> <div class="foods-wrapper" ref="foodsWrapper"> <ul ref="foodsUl"> <li class="food-list-hook" v-for="(good,index) in shopGoods" :key="index"> <h1 class="title">{{good.name}}</h1> <ul> <li class="food-item bottom-border-1px" v-for="(food,index) in good.foods" :key="index"> <div class="icon"> <img width="57" height="57" :src="food.icon"> </div> <div class="content"> <h2 Class = "name" > {{food. The name}} < / h2 > < p class = "desc" > {{food. The description}} < / p > < div class = "extra" > < span class = "count" > month sales {{food.rating}}%</span> </div> <div class="price"> <span Class = "now" > ${{food. Price}} < / span > < / div > < div class = "cartcontrol - wrapper" > cartcontrol < / div > < / div > < / li > < / ul > < / li > </ul> </div> </div> </div> </template> <script> import BScroll from 'better-scroll' import {mapState} from 'vuex' export Default {data(){return {scrollY: ", // record the Y value of the current slide position tops:[] // record the Y value of each li, }}, Mounted (){this.$shop.dispatch ()=>{this.$shop.dispatch ()=>{this. This._initscroll () this._inittops ()})})}, computed:{... CurrentIndex (){const {scrollY,tops} = this; Const index = tops.findIndex((top,index) => {return scrollY >= top && scrollY < tops[index + 1]}) return index; }}, methods:{// initialize _initScroll(){// apply sliding component, This. ScrollMenu = new BScroll('.menu-wrapper',{click:true}) this. ScrollFoods = new BScroll('.foods-wrapper',{ ProbeType :2, // Can't listen for inertial slip, On ('scroll',({x,y})=>{this.scrolly = math.abs (y)}) // To monitor the position at which the slide stops this.scrollFoods.on('scrollEnd',({x,y})=>{ this.scrollY = Math.abs(y) }) }, _initTops(){const tops = []; let top = 0; tops.push(top); // get li const lis = this.$refs.foodsul. Children; / / true Array, pseudo Array can be converted to traverse to get every li Y value of the corresponding Array. The prototype. Slice. Call (lis). ForEach (li) = > {top + = li. ClientHeight; tops.push(top) }) this.tops = tops; }, // select selectMenu(index){const topY = this.tops[index]; // When clicked, the right classification style immediately changes this.scrollY = topY; / / on the right side of this slide to a specified position. ScrollFoods. ScrollTo (0 - topY, 300)}}} < / script > < style lang = "stylus" rel = "stylesheet/stylus" > @ import ".. /.. /.. /common/stylus/mixins.styl" .goods display: flex position: absolute top: 195px bottom: 46px width: 100% background: #fff; overflow: hidden .menu-wrapper flex: 0 0 80px width: 80px background: #f3f5f7 .menu-item display: table height: 54px width: 56px padding: 0 12px line-height: 14px &.current position: relative z-index: 10 margin-top: -1px background: #fff color: $green font-weight: 700 .text border-none() .icon display: inline-block vertical-align: top width: 12px height: 12px margin-right: 2px background-size: 12px 12px background-repeat: no-repeat .text display: Table-cell width: 56px vertical-align: middle bottom-border-1px(rGBA (7, 17, 27, 0.1)) FONT size: gba 12px .foods-wrapper flex: 1 .title padding-left: 14px height: 26px line-height: 26px border-left: 2px solid #d9dde1 font-size: 12px color: rgb(147, 153, 159) background: #f3f5f7 .food-item display: flex margin: Background-color: RGB (255,255,255); background-color: RGB (255,255); background-color: RGB (255,255); background-color: RGB (255,255); background-color: RGB (255,255); 0 .icon flex: 0 0 57px margin-right: 10px .content flex: 1 .name margin: 2px 0 8px 0 height: 14px line-height: 14px font-size: 14px color: rgb(7, 17, 27) .desc, .extra line-height: 10px font-size: 10px color: rgb(147, 153, 159) .desc line-height: 12px margin-bottom: 8px .extra .count margin-right: 12px .price font-weight: 700 line-height: 24px .now margin-right: 8px font-size: 14px color: rgb(240, 20, 20) .old text-decoration: line-through font-size: 10px color: rgb(147, 153, 159) .cartcontrol-wrapper position: absolute right: 0 bottom: 12px </style>Copy the code

Matters needing attention

1. Create a slide instance repeatedly for a list, because the methods in the slide list are configured by better-scroll. When the methods in the list are triggered, they will be triggered several times.

if(! this.scroll){ this.scroll = new BScroll('.list-content',{ click:true }) }Copy the code

2. If the list needs to load data several times and cannot slide for the first time, you can use refresh event to resolve the problem and re-render the slide list

this.scroll.refresh()
Copy the code