uniapp系列：点击商品类别后，页面跟着滚动到指定的类别中

WalkerShen

于 2023-06-10 17:40:16 发布

阅读量918

点赞数 1

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/Think_and_work/article/details/131144659

uniapp 专栏收录该内容

1 篇文章

订阅专栏

通过给商品分类的view定义id并设置scroll-into-view属性，结合点击事件处理函数动态赋值，实现点击商品类别时页面自动滚动到相应位置，简化了使用scroll-top计算定位的复杂过程。

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

实现功能

点击商品类别后，页面跟着滚动到指定的类别中

案例

步骤

1、给分类的商品分类的view定义id

scroll-into-view赋值一个变量curScrollId

<scroll-view
  class="goodsList" 
  scroll-y="true"
  :style="'height:'+scrollviewHigh+'px'"
<!--   scroll-into-view 跳转到对应的id -->
  :scroll-into-view="curScrollId"
  scroll-with-animation="true"
  >
  <view 
    class="item"
<!--    定义id -->
    :id="'cate-'+item.categoryId"
    v-for="(item,index) in goodList"
    :key="index"
    >
    <view class="title">
      {{item.categoryName}}
    </view>
      <goods 
      v-for="(k,i) in item.products"
      :data="k"
      :key="i"
        ></goods>
        </view>
        </scroll-view>

2、点击商品分类方法时，给curScrollId赋值

curScrollId:"",

clickType(id) {
				this.currentTypeId = id
  //curScrollId赋值
				this.curScrollId='cate-'+id
				
			},

直接使用scroll-into-view封装的，而不需要使用scroll-top，这个的话需要去计算数据的top和bottom，然后去判断需要跳转的位置，相对而言麻烦很多