首页 > 编程 > JavaScript > 正文

vue2.0中goods选购栏滚动算法的实现代码

2019-11-19 16:34:27
字体:
来源:转载
供稿:网友

不多说,直接代码,以便以后重复利用:

<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选购栏滚动算法的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表