SoFunction
Updated on 2025-04-04

Implementation code of the scrolling algorithm of goods purchasing bar in vue2.0

Without further ado, direct code so that you can reuse it later:

<script type="text/ecmascript-6">
import BScroll from 'better-scroll';
const ERR_OK = 0;
export default {
 props: {
  sell: {
   type: Object
  }
 },
 data() {
  return {
   goods: [],
   listHeight: [],
   scrollY: 0
  };
 },
 computed: {
  currentIndex() {
   for (let i = 0; i < ; i++) {
    let height1 = [i];
    let height2 = [i + 1];
    if (!height2 || ( >= height1 &&  < height2)) {
     return i;
    };
   }
   return 0;
  }
 },
 created() {
   = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
  this.$('/api/goods').then((response) => {
   response = ;
   if ( === ERR_OK) {
     = ;
    this.$nextTick(() => {
     this._initScroll();
     this._calculateHeight();
    });
   }
  });
 },
 methods: {
  _initScroll() {
    = new BScroll(this.$, {
    click: true
   });
    = new BScroll(this.$, {
    probeType: 3
   });
   ('scroll', (pos) => {
     = (());
   });
  },
  _calculateHeight() {
   let foodList = this.$('food-list-hook');
   let height = 0;
   (height);
   for (let i = 0; i < ; i++) {
    let item = foodList[i];
    height += ;
    (height);
   }
  },
  selectMenu(index, event) {
   if (!event._constructed) {
    return;
   };
   (index);
   let foodList = this.$('food-list-hook');
   let el = foodList[index];
   (el, 300);
  }
 }
};
</script>

The above is the implementation code of the goods purchasing bar scrolling algorithm in vue 2.0 introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!