微信小程序获取节点ID滚动定位到ID节点

最新推荐文章于 2025-10-28 15:11:40 发布

原创最新推荐文章于 2025-10-28 15:11:40 发布 · 2.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

小程序专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在微信小程序中实现顶部Tab导航点击后滚动到指定位置的功能。具体包括使用scroll-into-view属性来实现元素定位，scroll-y允许纵向滚动，并通过动态ID绑定和获取节点ID来完成页面跳转。

一：首先顶部有tab导航，点击的时候需要定位到Id的位置，所有ID为动态
在这里插入图片描述
二：下面的容器使用小程序标签包裹
1：scroll-into-view="{{toView}}" scroll-into-view
值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素

2：scroll-y=“true” 允许纵向滚动
3：scroll-top="{{scrllorTop}}" 设置横向滚动条位置我这里scrllorTop为0

       <scroll-view class="browse_content_box" scroll-into-view="{{toView}}"  scroll-y="true" style="height:100%" scroll-top="{{scrllorTop}}">
            <view wx:for="{{resultArr}}" wx:key="index" >
              <view class="centers_title_header"  id="{{item.idName}}{{index}}">
                <text>{{item.title}}</text>
                <view class="browse_content_item">
                      <view class="browse_items" wx:for="{{item.list}}"  wx:key="index" wx:for-item="items">
                        <view bindtap="searchSingle" data-id="{{items.id}}" data-index="{{index}}"
                          data-current="{{items.currentIndex}}"
                          class="{{ (nums ) == items.nums ? 'browse_border' : items.state? 'browse_items_radius1':'browse_items_radius' }}">
                          <text>{{items.nums}}</text>
                        </view>
                      </view>
                </view> 
              </view>
            </view>
          </scroll-view>

4.查看ID绑定值这里所有ID为动态ID
在这里插入图片描述
5，获取节点ID

onChanges(event) {
    let {
        index
    } = event.currentTarget.dataset
    let that = this
    let scrollName ='scroll'+index    //绑定的ID就是为‘scroll’+index,所以就这样获取
    console.log(scrollName)
    this.setData({
        toView:scrollName
    })

第二题：
在这里插入图片描述
第四题：

第六题：

这里是获取到的ID名称----------完美