vue2.0中goods选购栏滚动算法

阳光穿透心脏的1/2处 2022-06-16 13:44 225阅读 0赞

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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，225人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 消息滚动通知栏

从下往上跑 ![在这里插入图片描述][20191121175205596.png] 1 <div class="news flex-bet"> <di

心已赠人/ 2023年06月15日 09:51/ 0 赞/ 227 阅读

相关移动端左右滚动（无滚动条）导航栏

方法一：flex和overflow-y 下面这两条css属性，能够帮助我们实现移动端导航栏，左右滚动，但有滚动条。 display: flex; ov

秒速五厘米/ 2023年03月04日 09:14/ 0 赞/ 65 阅读

相关 vue 封装组件之顶部导航栏随着页面滚动变化颜色

导航栏可以说是前端页面很常见的一个组件。许多组件库也提供了自己的导航栏在这篇文章里，我们来实现一个随着页面的滚动样式发生改变的导航栏吧。 ![在这里插入图片描述][wat

偏执的太偏执、/ 2022年12月01日 14:12/ 0 赞/ 815 阅读

相关 html滚动信息栏,公告滚动.html

dodou-移动框架 \scrollDiv\{height:40px;line-height:40px;overflow:hidden; background:url(ima

系统管理员/ 2022年10月06日 10:53/ 0 赞/ 219 阅读

相关 Vue滚动监听导航栏样式变化，实现导航栏绑定内容锚点+滚动动画+vue-router

[https://www.jianshu.com/p/2ad8c8b5bf75][https_www.jianshu.com_p_2ad8c8b5bf75] <tem

柔情只为你懂/ 2022年09月10日 06:30/ 0 赞/ 274 阅读

相关 Vue 滚动导航栏固定(导航吸顶)

[Vue导航条吸顶效果 - 简书][Vue_ -] [https://www.cnblogs.com/nbwsj/p/12122689.html][https_www.cnb

痛定思痛。/ 2022年09月10日 06:30/ 0 赞/ 439 阅读

相关 vue2.0中goods选购栏滚动算法

不多说，直接代码，以便以后重复利用： <script type="text/ecmascript-6"> import BScroll from 'better-scro

阳光穿透心脏的1/2处/ 2022年06月16日 13:44/ 0 赞/ 226 阅读

相关 Vue ( 三 ) goods 组件开发

一、布局 Flex Flex 布局，可以简便、完整、响应式地实现各种页面布局，Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大

╰+攻爆jí腚メ/ 2022年06月01日 04:21/ 0 赞/ 263 阅读

相关 js 实现两栏同时滚动

这个需求有点意思，拿出来和大家分享一下。如果你去实现过这样的效果，或者类似这样的效果的，你会发现简单去一栏控制另一栏的的滚动距离，另一栏类似控制第一栏的效果的话。你会发

朴灿烈づ我的快乐病毒、/ 2022年05月23日 02:05/ 0 赞/ 123 阅读

相关 vue源码系列文章good

关于Vue.js Vue.js是一款MVVM框架，上手快速简单易用，通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于[Object.defineProp

ゝ一纸荒年。/ 2022年03月08日 04:58/ 0 赞/ 240 阅读