scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素,

调用元素就可以出现在视窗中。如果给该方法传入true作为参数,或者不传入任何参数,那么 窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数,调用元素会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口的顶部齐平。)不过顶部不一定齐平

<div class="tab">
  <a href="#" @click="Tocontone">基本信息</a>
  <a href="#" @click="Toconttwo">使用状态</a>
  <a href="#" @click="Tocontthree">位置信息</a>
  <a href="#" @click="Tocontfour">采购信息</a>
  <a href="#" @click="Tocontfive">质保信息</a>
  <a href="#" @click="Tocontsix">折旧信息</a>
</div>
 
<div class="contentview">
        <!-- 第一部分 -->
        <div class="infocontent" id="contone">
          <div class="information">
            <div class="informationtap">
              <p>基本信息</p>
            </div>
          </div>
          <div class="informationdetail">
            <div class="infoimg">
              <div><img src="../../assets/images/informationview/infomate.png" alt=""></div>
            </div>
            <div class="infodetail">
              <table>
                <tr>
                  <td>设备编号</td>
                  <td>{{equipmentInfo.equipmentNo}}</td>
                  <td>规格</td>
                  <td>{{equipmentInfo.specification}}</td>
                  <td>创建时间</td>
                  <td>{{equipmentInfo.addDateTime}}</td>
                  <td>参数1</td>
                  <td>{{equipmentInfo.parameter1}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <!-- 第二部分 -->
        <div class="infocontent"  id="conttwo">
          <div class="information">
            <div class="informationtap">
              <p>使用状态</p>
            </div>
          </div>
          <div class="usingstate">
            <div class="statetable">
              <table>
                <tr>
                  <td>使用状态</td>
                  <td>{{useStatus.useStatus}}</td>
                  <td>界限值-高</td>
                  <td>{{useStatus.limitValueHigh}}</td>
                  <td>报警值-高</td>
                  <td>{{useStatus.alertValueHigh}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <!-- 第三部分 -->
        <div class="infocontent"  id="contthree">
          <div class="information">
            <div class="informationtap">
              <p>位置信息</p>
            </div>
          </div>
          <div class="locationinfo">
            <div class="locationdetail">
              <table>
                <tr>
                  <td>街区编码</td>
                  <td>{{locationInfo.locationNo}}</td>
                  <td>街区名称</td>
                  <td>{{locationInfo.locationName}}</td>
                  <td>大厦编码</td>
                  <td>{{locationInfo.buildingNo}}</td>
                  <td>大厦名称</td>
                  <td>{{locationInfo.buildingName}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <!-- 第四部分 -->
        <div class="infocontent"  id="contfour">
          <div class="information">
            <div class="informationtap">
              <p>采购信息</p>
            </div>
          </div>
          <div class="purchasing">
            <div class="purchasinfo">
              <table>
                <tr v-for="pur in purchase.supplierPerson">
                  <td>{{purchase.supplierName}}</td>
                  <td></td>
                  <td>联系人</td>
                  <td>{{pur.supplierPersonName}}</td>
                  <td>电话</td>
                  <td>{{pur.supplierPhone}}</td>
                  <td>岗位</td>
                  <td>{{pur.supplierPost}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <!-- 第五部分 -->
        <div class="infocontent" id="contfive">
          <div class="information">
            <div class="informationtap">
              <p>时间日期</p>
            </div>
          </div>
          <div class="timedate">
            <div class="dateinfo">
              <table>
                <tr>
                  <td>生产日期</td>
                  <td>{{timeDate.productionDate}}</td>
                  <td>采购日期</td>
                  <td>{{timeDate.purchaseDate}}</td>
                  <td>入库日期</td>
                  <td>{{timeDate.storageDate}}</td>
                  <td>启用日期</td>
                  <td>{{timeDate.runDate}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <!-- 第六部分 -->
        <div class="infocontent" id="contsix">
          <div class="information">
            <div class="informationtap">
              <p>文档信息</p>
            </div>
          </div>
          <div class="documentinfo">
            <div >
              <table>
                <tr>
                  <td>文档名称</td>
                  <td>文档类型</td>
                  <td>文档概述</td>
                  <td>上传时间</td>
                  <td>上传人</td>
                  <td>操作</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
<script>
methods:{
    Tocontone(){
      document.querySelector("#contone").scrollIntoView(true);
    },
    Toconttwo(){
      document.querySelector("#conttwo").scrollIntoView(true);
    },
    Tocontthree(){
      document.querySelector("#contthree").scrollIntoView(true);
    },
    Tocontfour(){
      document.querySelector("#contfour").scrollIntoView(true);
    },
    Tocontfive(){
      document.querySelector("#contfive").scrollIntoView(true);
    },
    Tocontsix(){
      document.querySelector("#contsix").scrollIntoView(true);
  }
}
</script>

 

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐