uniapp点击某元素跳转到指定元素位置

1,415 阅读1分钟
 <div
            class="catalogue"
            :class="catalogue_index === i ? 'active' : ''"
            v-for="(item, i) in ppt_list"
            :key="i"
            @click="choice_catalogue(item.id,i)"
          ></div>
          
          
<div class="PPT-item" :class="'PTX_Ex_'+item.id" v-for="(item, index) in ppt_list" :key="index"></div>
 choice_catalogue(id,i) {
      // 借用当前项id给要跳转的位置加入动态类名,使其跳转到指定位置(获取到指定位置的高度)
      this.catalogue_index = i;
      console.log(i);
      // 关闭遮罩
      this.esc_mask()
      uni.createSelectorQuery().select(".PTX_Ex_" + id).boundingClientRect((data) => {
          //目标位置的节点:类class或者id
        uni.createSelectorQuery().select(".PPT-container").boundingClientRect((res) => {
              //最外层盒子的节点:类class或者id
              uni.pageScrollTo({
                duration: 400, //过渡时间
                scrollTop: data.top, //到达距离顶部的top值
                //scrollTop:data.top - res.top,//如果置顶
              });
              console.error('',data.top,res.top);
            }).exec();
        }).exec();
    },