vue 用什么滚动插件，就不能自己写一个简单的来实现？手把手教你使用指令完成商品页滚动

本文链接：https://blog.youkuaiyun.com/le185186826/article/details/80579129

本文介绍如何使用Vue自定义指令实现商品列表滚动监听功能。通过编写特定的指令代码，可以轻松地为需要滚动的元素添加scroll事件监听，并在滚动过程中触发回调函数更新导航状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

因为要做手机页面的商品列表滚动。类似这种
商品滚动效果图
看了一眼人家的插件索性一想还不是自己写一个。

前期准备

vue 自定义指令
zan ui https://www.youzanyun.com/zanui/vant#/zh-CN/intro
javascript scroll事件

指令代码

const goodScroll = {
  inserted(el, binding, vnode) {
    const callBack = binding.value
    el.addEventListener('scroll', e => {
      const allTopValues = [] //保存所有子元素的offsetTop值 
      el.childNodes.forEach(a => {
        allTopValues.push(a.offsetTop)
      })
      const scrollTop = el.pageYOffset || el.scrollTop || el.scrollTop
      let i = 0
      for (; i < allTopValues.length; i++) {

         //确定父标签落在哪个子元素内
        if (allTopValues[i] > scrollTop) {  
          break
        }
      }
      callBack(i - 1) //回调指令绑定函数
    })
  }
}
export { goodScroll }

vue template（关键部分）

  <div class="g-container">
    <div class="g-category">

       //注意此处的 :active-key="activeKey" 回调会改变这个值
      <van-badge-group :active-key="activeKey">
        <van-badge :title="item.name" :key="index" v-for="(item,index) in category" @click="onClick(index)" />
      </van-badge-group>
    </div>
    //注意此处的 v-goodScroll="onScroll" ref="goodslist"
    <div class="goods-list" v-goodScroll="onScroll" ref="goodslist">
      <ul v-for="(aandg,index) in aandgs" :key="index" class="g-item">
        <li class="li-title">{{aandg.category.name}}</li>
        <li class="li-goods clearfix" v-for="goods in aandg.goods" :key="'_goods_'+goods.id">
          <div class="g-item-left">
            <img :src="goods.picUrl">
          </div>
          <div class="g-item-right">
             <div class="g-item-name">{{goods.name}}</div>
             <div class="g-item-price">￥{{goods.price || 100}}</div>
             <div class="g-item-add"><van-icon name="add-o" /></div>
          </div>         
        </li>
      </ul>
    </div>
  </div>

vue script

methods:{
  onClick(index) {
         this.$refs.goodslist.scrollTop = this.$refs.goodslist.childNodes[index].offsetTop
        //  console.log(this.$refs.goodslist)
       },
       onScroll(i) {
         this.activeKey = i
         console.log(i)
       }
}