vue2.0中goods選購欄滾動演算法的實現代碼，vue2.0goods

vue2.0中goods選購欄滾動演算法的實現代碼，vue2.0goods

不多說，直接代碼，以便以後重複利用：

<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>

以上所述是小編給大家介紹的vue2.0中goods選購欄滾動演算法的實現代碼，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！