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

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

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

代码语言:javascript
复制
  uni.pageScrollTo({
        scrollTop: 0, // 滚动到页面的目标位置(单位px)
        duration: 300 // 滚动动画的时长,默认300ms,单位 ms
    });
代码语言:javascript
复制
  uni.pageScrollTo({
        selector: "#id", // 找到ID滚动到指定位置
        duration: 300 // 滚动动画的时长,默认300ms,单位 ms
    });

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

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

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

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

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

代码语言:javascript
复制
  uni.createSelectorQuery().select("#王五")
          .boundingClientRect((res) => {
            console.log(res.top)
          }).exec()

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

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

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

代码语言:javascript
复制
//相对位置计算
        var ntop = Math.ceil((index+1) /3)-1;
        console.log(ntop,index);

数据结构是这样滴。

代码语言:javascript
复制
datalist:[
   {class:"一班","details":[]},
   {class:"二班","details":[]}   
]

最终就是这样了。

代码语言:javascript
复制
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()</code></pre></div></div>