uniapp根据选中项滚动列表,亲测app端和pc端都无问题

在APP端没有document, window,要实现滚动就要借助scroll-view,要获取窗口高度和列表项高度就要借助uniapp的API.

scroll-view


<scroll-view :scroll-top="scrollTop" scroll-y="true">
仅需改变scrollTop的值就可以实现区域滚动

const query = uni.createSelectorQuery().in(this)
将选择器的选取范围更改为自定义组件this内,返回一个 SelectorQuery 对象实例。
(初始时,选择器仅选取页面范围的节点,不会选取任何自定义组件中的节点)。
query.select(selector).boundingClientRect(callback)
在当前页面下选择第一个匹配选择器 selector 的节点,返回一个 NodesRef 对象实例,可以用于获取节点信息。boundingClientRect获取布局信息
selectorQuery.selectAll(selector).boundingClientRect(callback)
在当前页面下选择匹配选择器 selector 的所有节点,返回一个 NodesRef 对象实例,可以用于获取节点信息。获取到的是一个列表
selectorQuery.exec(callback)
执行所有的请求。请求结果按请求次序构成数组,在 callback 的第一个参数中返回。

 实现步骤:

1、获取定位项在列表中的index值

2、获取区域滚动的高度

3、获取每一项的高度

4、计算当前项前的列表叠加的高度,既当前项的top,当当前项不在当前窗口,需要滚动到指定高度,当当前项在当前窗口,则不滚动,当查找项目只有一半部分在当前窗口,则滚动到当前项目之前叠加的高度

if (currentIndex > -1) {
  this.$nextTick(()=>{
    const query = uni.createSelectorQuery().in(this)
    query
      .select('#tableBody')
      .boundingClientRect()
    query.selectAll('#tableBody .item-tr')
      .boundingClientRect()
    query.exec(res => {
        const data1 = res[0]
        let scrollTop = 0
        let sumheight = 0
        if (res[1] && Array.isArray(res[1]) && res[1].length > 0) {
          res[1].forEach((item, index) => {
            if (index < currentIndex) {
              sumheight += item.height
            }
          })
          // 当查找项高度不在当前窗口,需要滚动到指定高度
          // 当查找项目在当前窗口,则不滚动
          // 当查找项目只有一半部分在当前窗口,则滚动到当前项目之前叠加的高度
          scrollTop = (sumheight > data1.height) ? sumheight : (res[1][currentIndex].height + sumheight) > data1.height ? sumheight : 0
        }
        this.scrollTop = scrollTop
      })
  })
}

 这个方法实现的在pc端和app端都可以

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值