微信小程序获取节点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名称----------完美
在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值