Implementation code of the goods bar rolling Algorithm in vue2.0, vue2.0goods

Implementation code of the goods bar rolling Algorithm in vue2.0, vue2.0goods

Not to mention, direct code for reuse in the future:

<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 < this.listHeight.length; i++) {    let height1 = this.listHeight[i];    let height2 = this.listHeight[i + 1];    if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {     return i;    };   }   return 0;  } }, created() {  this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];  this.$http.get('/api/goods').then((response) => {   response = response.body;   if (response.errno === ERR_OK) {    this.goods = response.data;    this.$nextTick(() => {     this._initScroll();     this._calculateHeight();    });   }  }); }, methods: {  _initScroll() {   this.menuScroll = new BScroll(this.$refs.menuwrapper, {    click: true   });   this.foodScroll = new BScroll(this.$refs.foodswrapper, {    probeType: 3   });   this.foodScroll.on('scroll', (pos) => {    this.scrollY = Math.abs(Math.round(pos.y));   });  },  _calculateHeight() {   let foodList = this.$refs.foodswrapper.getElementsByClassName('food-list-hook');   let height = 0;   this.listHeight.push(height);   for (let i = 0; i < foodList.length; i++) {    let item = foodList[i];    height += item.clientHeight;    this.listHeight.push(height);   }  },  selectMenu(index, event) {   if (!event._constructed) {    return;   };   console.log(index);   let foodList = this.$refs.foodswrapper.getElementsByClassName('food-list-hook');   let el = foodList[index];   this.foodScroll.scrollToElement(el, 300);  } }};</script>

The above is the implementation code of goods's selection bar rolling Algorithm in vue2.0 introduced by xiaobian. I hope it will help you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!