uni-app 小程序页面滚动到指定位置，相对位置计算

最新推荐文章于 2025-03-16 12:37:40 发布

加菲猫的VFP

最新推荐文章于 2025-03-16 12:37:40 发布

阅读量904

点赞数

文章标签： uni-app 小程序前端

本文链接：https://blog.csdn.net/fitche/article/details/134302155

版权

我有一个页面需要定位也就是需要点击定位按钮页面滚动到指定的位置

查了一下UNI-APP的API，发现可以有API可以进行页面定位

uni.pageScrollTo({
        scrollTop: 0, // 滚动到页面的目标位置（单位px）
        duration: 300 // 滚动动画的时长，默认300ms，单位 ms
    });

uni.pageScrollTo({
        selector: "#id", // 找到ID滚动到指定位置
        duration: 300 // 滚动动画的时长，默认300ms，单位 ms
    });

一个是指定位置，像素级指定，但你必须知道每个人的格子的位置，那么还有一个selector 可以用，我可以指定每一个格子的ID，比如张三的格子，ID：张三，王五：ID王五。

代码一跑，页面是滚动起来了，但是不对啊。我定位王王，但

只滚动到了李四的位置，王五在外面，没显示出来。

检查了高度，发现只是王五那一排及以后的各排，都只定位到李四位置，他就是他们组的外层。这可不行。

于是利用了另一个API来获取组件的位置信息

uni.createSelectorQuery().select("#王五")
          .boundingClientRect((res) => {
            console.log(res.top)
          }).exec()

res.top 就是外层VIEW的位置，也就是李四所在的位置。

想了想，那是不是res.top+行数x行高不就可以滚动到相应的位置了。

index 为王五的索引，也就是下标，下标+1/3行-1 就是相对位置了，再乘以行高不就解决了。

//相对位置计算
        var ntop = Math.ceil((index+1) /3)-1;
        console.log(ntop,index);

数据结构是这样滴。

datalist:[
   {class:"一班","details":[]},
   {class:"二班","details":[]}   
]

最终就是这样了。

var input = this.keyword2
        console.log("我在找id", input)
        if(!input){
          return;
        }
        var _this = this;
        var mylist = [];
        //找到人员的INDEX


        var mylist = this.datalist;
        var index = -1;
        for (var lni = 0; lni < mylist.length; lni++) {
          var index = mylist[lni].details.findIndex((row, rowidx) => row.missno == input);
          if (index >= 0) {
            break;
          }
        }
        if (index < 0) {
          this.$msg("没有此号")
          return;
        }


        //相对位置计算
        var ntop = Math.ceil((index+1) /3)-1;
        console.log(ntop,index);


        uni.createSelectorQuery().select("#a" + input)
          .boundingClientRect((res) => {


            console.log(res);
            uni.pageScrollTo({
              scrollTop: res.top + ntop * 125.5,
              success: function() {
                _this.$msg("跳转成功");


              },
              fail: function() {
                _this.$msg("没有找到")
              }
            })
          }).exec()