Tea classification: right scrolling data, linkage left style this idea for the novice I feel a little difficult, not familiar with this kind of routine, such as experience just feel not so difficult to take notes, convenient to look back in the future

Ideas:

  1. Dynamically bind classes, as objects, in conjunction with computed properties

  2. The calculation property is combined with findIndex and data comparison

The 3 steps are as follows: 1 // Dynamic binding :class style :class="{active:index==currentIndex}" Better Scroll on(type, fn, context) {// There is a pit in the better scroll on(type, fn, context) {// There is a pit in the better scroll on(type, fn, context); ProbeType: 2 | 3. Default is 0 reference: https://better-scroll.github.io/docs-v1/doc/zh-hans/options.html#probetype this.wrapper_menu.on("scroll", (pos) => { // console.log(pos); This. ScrollY = math.abs (pos.y); }); Do a careful analysis on your own. I seldom encounter this kind of situation when I learn knowledge. { currentIndex() { return this.scrollHeight.findIndex((item, index) => { // console.log(item, index); return ( this.scrollY >= item && this.scrollY < this.scrollHeight[index + 1] ); }); },}, overall code:  <template> <div class="section"> <div class="l-menu"> <div class="wrapper"> <ul> <li v-for="(item,index) in menuList" :key="index" @click="clickLeftMenu(index)" :class="{active:index==currentIndex}" >{{item.title}}</li> </ul> </div> </div> <div class="r-menu"> <div class="wrapper-menu"> <div ref="scrolls"> <ul class="recommend" ref="ulrecommend" v-for="(item,index) in recommendInfo" :key="index" > <li v-for="(k,i) in item" :key="i"> <div>{{k.title}}</div> <ul class="Tea"> <li v-for="(s,idxs) in k.list" :key="idxs"> <img :src="s.imgUrl" alt /> <div>{{s.title}}</div> </li> </ul> </li> </ul> </div> </div> </div> </div> </template> <script> import http from "@/common/api/request.js"; Import BScroll from "better-scroll"; export default { data() { return { menuList: [], recommendInfo: [], wrapper_menu: "", scrollHeight: [], // Array of right scrolling distances (ul for each height, use this distance when clicking the menu on the left) scrollY: "", // Right scrolling distances}; }, created() { this.getList(); }, methods: { async getList() { let res = await http.$axios({ url: "/api/goods/list", }); let menuList = []; let recommendInfo = []; // console.log(res); res.forEach((i) => { menuList.push({ id: i.id, title: i.title, }); recommendInfo.push(i.data); }); this.menuList = menuList; this.recommendInfo = recommendInfo; $nextTick() => {new BScroll(".wrapper", {click: true, pullUpLoad: true, scrollbar: true, pullDownRefresh: true, }); }); $nextTick(() => {this.wrapper_menu = new BScroll(".wrapper-menu", {pullUpLoad: true, scrollbar: true, pullDownRefresh: true, }); // let height = 0; this.scrollHeight.push(height); Let uls = this.$refs.ulrecommend; Array.from(uls).foreach ((I) => {// console.log(i.clientheight); // Get the height of each ul and add the sum to an empty array height += i.clientheight; this.scrollHeight.push(height); }); // console.log(height); // console.log(uls); // console.log(this.scrollHeight); According to the implementation of the Better - Scroll on(type, fn, context) // 1.1 I heard that there was a pit long ago (but now there is no pit), so that the distance can not be obtained by scrolling. / / solution: an attribute is added in the scroll event: probeType: 2 | 3, the default is 0 reference: https://better-scroll.github.io/docs-v1/doc/zh-hans/options.html#probetype // this.wrapper_menu.on("scroll", (pos) => { // console.log(pos); This. ScrollY = math.abs (pos.y); }); }); }, // Click clickLeftMenu(index) {console.log(index); Console. log(this.$refs.scrolls); this.wrapper_menu.scrollTo(0, -this.scrollHeight[index], 300); },}, // Calculate attributes computed: { currentIndex() { return this.scrollHeight.findIndex((item, index) => { // console.log(item, index); return ( this.scrollY >= item && this.scrollY < this.scrollHeight[index + 1] ); }); ,}}}; </script> <style lang="less" scoped> .section { display: flex; position: fixed; justify-content: space-between; height: 100vh; width: 100vw; .l-menu { border-right: 1px solid #cccccc; ul { display: flex; flex-direction: column; justify-content: center; align-items: center; Li {the font - size: 0.48 rem; Margin: 0.266667 rem; } } // ul li::before { // content: ""; // position: absolute; // display: inline-block; // width: 1px; // height: 20px; // background-color: red; // } ul .active { // position: fixed; padding-left: 0; border-left: 1px solid red; // box-sizing: border-box; } } .r-menu { .wrapper-menu { height: 35vh; } flex: 1; .recommend { display: flex; flex-direction: column; .Tea { display: flex; flex-wrap: wrap; Margin: 0 0.533333 rem 0.533333 rem; flex: 1; li { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 2rem; height: 2rem; Margin: 0.133333 rem; Div {the font - size: 0.373333 rem; } img {width: 1.413333rem; Height: 1.413333 rem; }}}}. Recommend li > div {margin: 0.266667rem; The font - size: 0.48 rem; text-align: center; } } } </style>Copy the code

Scroll the data on the right and the menu navigation on the left automatically jump to the corresponding menu option according to the height of scrolling