当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue2.0中goods选购栏滚动算法的实现代码

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

2018年04月30日  | 移动技术网IT编程  | 我要评论

最新外国电影,基伍集团,青岛周边一日游

不多说，直接代码，以便以后重复利用：

<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选购栏滚动算法的实现代码，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网