Today's summary betterscroll uses the shopping page list to click and slide

Cnpm install better scroll -- save / / install

	import BScroll from 'better-scroll'

/ / call

<div class="left" ref="menuWrapper">

//Write ref dom

  			_initScroll(){
  				this.meunScroll=new BScroll(this.$refs.menuWrapper,{});
  			},

//Write events in methods

				this.$nextTick(()=>{
					this._initScroll();
				});

/ / this method is run in the ajax request, and $nextTick calls betterscroll in the dom update callback.

this._calculateHeight()

Add a new event to the $nextTick event callback

    data() {
      return {
        goods: [],
        listHeight: [],
        scrollY: 0,
        selectedFood: {},
        shows:1,
      };
    },

//Insert the required events listHeight and scrollY height calculation events

<li v-for="item in goods.respond" ref="foodList">

//Use ref.. Right food page access is the entire li access

		      _calculateHeight() {
		        let foodList = this.$refs.foodList; // The height of each foodlist is the height of each block
		        let height = 0;
		        this.listHeight.push(height);
		        for (let i = 0; i < foodList.length; i++) {
		          height += foodList[i].clientHeight; // clientHeight the visual height of each block
		          this.listHeight.push(height);
		        }
		      },

//Write events in methods

<li class="leftItem"  :class="{'current': currentIndex === index}"

//Attribute calculation and highlighting: now slide right and the left will be highlighted

<li class="leftItem" v-for="(item,index) in goods.respond" :key="index" :class="{'current': currentIndex === index}"
@click="selectMenu(index, $event)">{{item.typename}}</li>

//Add a click event to the left

  			_initScroll(){
  				this.meunScroll=new BScroll(this.$refs.menuWrapper,{
  					          click: true     // Turn on click event (BS will block it by default)
  				});
  				this.foodsScroll=new BScroll(this.$refs.foodsWrapper,{});
		  		this.foodsScroll = new BScroll(this.$refs.foodsWrapper, {
		          probeType: 3      // Set the rolling position of BS real-time monitoring
		        });
                this.meunScroll = new BScroll(this.$refs.menuWrapper, {});
		         this.foodsScroll.on('scroll', (position) => {   // this is bound with the arrow function
		          // Judge the sliding direction to avoid the error of category highlighting when pulling down (for example, when the number of first category goods is 1, the pull-down makes the second category highlight)
		          if (position.y <= 0) {
		            this.scrollY = Math.abs(Math.round(position.y));
		          }
		        });
  			},

//inint.. I don't understand. Go back to the tutorial

	      selectMenu(index, event) {
	        if (!event._constructed) {  //Prevent clicking twice on the pc
	          return;
	        }
	        let foodList = this.$refs.foodList;
	        let el = foodList[index];
	        this.foodsScroll.scrollToElement(el, 300);   // BS interface, scroll to
	      },

//Click event

Tags: Attribute

Posted on Fri, 31 Jan 2020 18:49:18 -0800 by danjoe_15