微信小程序mpvue使用锚点，滚动到指定位置

使用scroll-view组件，通过scrolll-into-view方法滚动到指定位置，当滚动到指定位置时候清空值，但是滚动时获取元素高度实现滚动指定文字修改颜色

html:

<template>
   <div class="page">
     <scroll-view  :style="{'height': scrollHeight+'px'}" :scroll-y="true" @scrolltolower="scrolltolower" @scroll="scroll" :scroll-into-view="toView">
 
   
  &lt;div class="container"&gt;
    &lt;div class="page__bd page__bd_spacing"&gt;
      &lt;swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular" @change="swiperChange" @animationfinish="animationfinish"&gt;
        &lt;div v-for="item in imgUrls" :key="index"&gt;
          &lt;swiper-item&gt;
            &lt;image :src="item" class="slide-image" /&gt;
          &lt;/swiper-item&gt;
        &lt;/div&gt;
      &lt;/swiper&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="content"&gt;
    &lt;div class="art"&gt;
        &lt;div class="info"&gt;
        &lt;div class="left price"&gt;参考价： &amp;yen;110.00&lt;/div&gt;
        &lt;div class="right depart"&gt;互联网业务拓展部&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="title"&gt;
        唱吧麦克风ELF-黑色，赠 唱吧胶囊麦克风ELF防风罩-黑色
      &lt;/div&gt;
      &lt;div class="txt"&gt;
        &lt;div class="left"&gt;
          HPON1DG04PA#AB2
        &lt;/div&gt;
        &lt;div class="right"&gt;
          0   000
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
 
 &lt;div class="allContent"&gt;
   &lt;div :class="scrollTop&gt;=550?'bar barFixed':'bar'"&gt;
      &lt;div :class="currentTab==0?'item actice':'item'" @click="scrollTo1(0)"&gt;
       参数规格
      &lt;/div&gt;
      &lt;div :class="currentTab==1?'item actice':'item'" @click="scrollTo1(1)"&gt;
        包装售后 
      &lt;/div&gt;
      &lt;div :class="currentTab==2?'item actice':'item'" @click="scrollTo1(2)"&gt;
        图文详情
      &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="tabContent"&gt;
      &lt;div class="tabs1" id="tabs1"&gt;
          &lt;div class="col col1"&gt;
                        &lt;div class="line"&gt;&lt;/div&gt;
                        &lt;div class="t"&gt;
                         参数规格
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="tab1"&gt;
                        &lt;div class="item"&gt;
                          &lt;div class="left label"&gt;
                            商品编码：
                          &lt;/div&gt;
                          &lt;div class="left txt"&gt;
                            HPON1DG04PA#AB2商品编商品编商品
                          &lt;/div&gt;
                        &lt;/div&gt;
                        
                         &lt;div class="item"&gt;
                          &lt;div class="left label"&gt;
                            产品线
                          &lt;/div&gt;
                          &lt;div class="left txt"&gt;
                            HPON1DG04PA#AB2
                          &lt;/div&gt;
                        &lt;/div&gt;

                         &lt;div class="item"&gt;
                          &lt;div class="left label"&gt;
                            产品线
                          &lt;/div&gt;
                          &lt;div class="left txt"&gt;
                            HPON1DG04PA#AB2
                          &lt;/div&gt;
                        &lt;/div&gt;

                         &lt;div class="item"&gt;
                          &lt;div class="left label"&gt;
                            产品线
                          &lt;/div&gt;
                          &lt;div class="left txt"&gt;
                            HPON1DG04PA#AB2
                          &lt;/div&gt;
                        &lt;/div&gt;

                         &lt;div class="item"&gt;
                          &lt;div class="left label"&gt;
                            产品线
                          &lt;/div&gt;
                          &lt;div class="left txt"&gt;
                            HPON1DG04PA#AB2
                          &lt;/div&gt;
                        &lt;/div&gt;
                        
                        &lt;/div&gt;
                    
         &lt;/div&gt;
         &lt;div class="tabs2" id="tabs2"&gt;
          &lt;div class="col col1"&gt;
                        &lt;div class="line"&gt;&lt;/div&gt;
                        &lt;div class="t"&gt;
                         包装售后
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="tab1"&gt;
                        &lt;div class="item"&gt;
                          &lt;div class="left label"&gt;
                            商品编码：
                          &lt;/div&gt;
                          &lt;div class="left txt"&gt;
                            HPON1DG04PA#AB2商品编商品编商品
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="item"&gt;
                          &lt;div class="left label"&gt;
                            商品编码：
                          &lt;/div&gt;
                          &lt;div class="left txt"&gt;
                            HPON1DG04PA#AB2商品编商品编商品
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="item"&gt;
                          &lt;div class="left label"&gt;
                            商品编码：
                          &lt;/div&gt;
                          &lt;div class="left txt"&gt;
                            HPON1DG04PA#AB2商品编商品编商品
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="item"&gt;
                          &lt;div class="left label"&gt;
                            商品编码：
                          &lt;/div&gt;
                          &lt;div class="left txt"&gt;
                            HPON1DG04PA#AB2商品编商品编商品
                          &lt;/div&gt;
                        &lt;/div&gt;
                         &lt;div class="item"&gt;
                          &lt;div class="left label"&gt;
                            产品线
                          &lt;/div&gt;
                          &lt;div class="left txt"&gt;
                            HPON1DG04PA#AB2
                          &lt;/div&gt;
                        &lt;/div&gt;
                         &lt;div class="item"&gt;
                          &lt;div class="left label"&gt;
                            产品线
                          &lt;/div&gt;
                          &lt;div class="left txt"&gt;
                            HPON1DG04PA#AB2
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;/div&gt;
        
         &lt;/div&gt;
         &lt;div class="tabs3" id="tabs3"&gt;
          &lt;div class="col col1"&gt;
                        &lt;div class="line"&gt;&lt;/div&gt;
                        &lt;div class="t"&gt;
                          图文详情
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="tab1"&gt;
                        &lt;div class="item"&gt;
                          &lt;div class="left label"&gt;
                            商品编码：
                          &lt;/div&gt;
                          &lt;div class="left txt"&gt;
                            HPON1DG04PA#AB2商品编商品编商品
                          &lt;/div&gt;
                        &lt;/div&gt;

                         &lt;div class="item"&gt;
                          &lt;div class="left label"&gt;
                            商品编码：
                          &lt;/div&gt;
                          &lt;div class="left txt"&gt;
                            HPON1DG04PA#AB2商品编商品编商品
                          &lt;/div&gt;
                        &lt;/div&gt;

                         &lt;div class="item"&gt;
                          &lt;div class="left label"&gt;
                            商品编码：
                          &lt;/div&gt;
                          &lt;div class="left txt"&gt;
                            HPON1DG04PA#AB2商品编商品编商品
                          &lt;/div&gt;
                        &lt;/div&gt;

                         &lt;div class="item"&gt;
                          &lt;div class="left label"&gt;
                            商品编码：
                          &lt;/div&gt;
                          &lt;div class="left txt"&gt;
                            HPON1DG04PA#AB2商品编商品编商品
                          &lt;/div&gt;
                        &lt;/div&gt;
                         &lt;div class="item"&gt;
                          &lt;div class="left label"&gt;
                            商品编码：
                          &lt;/div&gt;
                          &lt;div class="left txt"&gt;
                            HPON1DG04PA#AB2商品编商品编商品
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="item"&gt;
                          &lt;div class="left label"&gt;
                            商品编码：
                          &lt;/div&gt;
                          &lt;div class="left txt"&gt;
                            HPON1DG04PA#AB2商品编商品编商品
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="item"&gt;
                          &lt;div class="left label"&gt;
                            商品编码：
                          &lt;/div&gt;
                          &lt;div class="left txt"&gt;
                            HPON1DG04PA#AB2商品编商品编商品
                          &lt;/div&gt;
                        &lt;/div&gt;
                         &lt;div class="item"&gt;
                          &lt;div class="left label"&gt;
                            产品线
                          &lt;/div&gt;
                          &lt;div class="left txt"&gt;
                            HPON1DG04PA#AB2
                          &lt;/div&gt;
                        &lt;/div&gt;
                        
                        &lt;/div&gt;
                    &lt;div class="tabImg"&gt;
                      &lt;div&gt;
                        &lt;image mode="widthFix" src="https://img.alicdn.com/imgextra/i3/3377338380/TB23qbQnnlYBeNjSszcXXbwhFXa_!!3377338380.jpg" &gt;&lt;/image&gt;
                      &lt;/div&gt;
                      &lt;div&gt;&lt;image mode="widthFix" src="https://img.alicdn.com/imgextra/i1/3377338380/TB2eOJve2uSBuNkHFqDXXXfhVXa_!!3377338380.jpg"&gt;&lt;/image&gt;&lt;/div&gt;
                    &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
    &lt;/scroll-view&gt;
 &lt;/div&gt;

</template>
<script>
export default {
  data() {
      return {
        indicatorDots: true,
        autoplay: true,
        interval: 5000,
        duration: 900,
        circular: true,
        imgUrls: [
          'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
          'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
          'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
        ],
        tabs: ["图文详情", "参数规格", "包装售后"],
        activeIndex: 0,
        fontSize: 30,
        scrollHeight:500,
        tabs1Height:0,
        tabs2Height:0,
        tabs3Height:0,
        currentTab:0,
        scrollTop:0,
        toView:""
      }
  },
	mounted(){
		var that=this;
	          wx.getSystemInfo({
	            success: function(res) {
	               that.scrollHeight=res.windowHeight;
	            }
	            });
	  },
  computed: {
    navbarSliderClass() {
      if (this.activeIndex == 0) {
        return 'weui-navbar__slider_0'
      }
      if (this.activeIndex == 1) {
        return 'weui-navbar__slider_1'
      }
      if (this.activeIndex == 2) {
        return 'weui-navbar__slider_2'
      }
    },
  },
  onLoad(){
  var _this=this;
  var query = wx.createSelectorQuery();
  //选择id
  query.select('.tabs1').boundingClientRect();
  query.exec(function (res) {
    //res就是 所有标签为mjltest的元素的信息 的数组
   console.log(res[0].height);
    //取高度
    _this.tabs1Height=res[0].height;
  });
  var query1 = wx.createSelectorQuery();
  query1.select('.tabs2').boundingClientRect();
  query1.exec(function (res) {
    //res就是 所有标签为mjltest的元素的信息 的数组
   // console.log(res[0].height);
    //取高度
    _this.tabs2Height=res[0].height;
  });
  var query3 = wx.createSelectorQuery();
  query3.select('.tabs3').boundingClientRect();
  query3.exec(function (res) {
    //res就是 所有标签为mjltest的元素的信息 的数组
    console.log(res[0].height);
    //取高度
    _this.tabs3Height=res[0].height;
  });

  },
  methods: {
    tabClick(e) {
      console.log(e);
      this.activeIndex = e.currentTarget.id;
    },
    scrolltolower(){
          console.log(7)
        },
        scroll(e) {
        var scrollH=e.mp.detail.scrollTop;
        var tabs2H=480+this.tabs1Height;
        var tabs3H=480+this.tabs2Height+this.tabs1Height;
        if(scrollH<tabs2H){
          this.currentTab=0;
        }else if(tabs2H<scrollH<tabs3H){
          this.currentTab=1;
        }
        if(scrollH>tabs3H){
          this.currentTab=2;
        }
          console.log(scrollH);
          console.log(tabs3H);
          this.scrollTop=scrollH;
           this.toView="";
        },
       scrollTo1(val){
       var tabs2H=480+this.tabs1Height;
    var tabs3H=480+this.tabs2Height+this.tabs1Height;
    console.log(val);
      if(val==0){
         this.toView="tabs1";
      }else if(val==1){
        this.toView="tabs2";
        
      }else{
         this.toView="tabs3";
      }
   }

  }
}
</script>
<style scoped lang="less">
@import "../../css/weui.css";
@import "goodsInfo.less";
</style>

css:

.container{
	width: 100%;
	background: #f5f5f5;
}
.page{
	
}
.left{
	float: left;
}
.right{
	float: right;
}
.slide-image {
  width: 100%;
  height: 100%;
}
.page__bd{
	height: 750rpx;
}
._swiper{
	height: 750rpx;
}
.content{
	width: 100%;
	margin-top: 30rpx;
	margin-bottom: 60rpx;
	.art{
		width: 700rpx;
		margin: 0 auto;
}
.info{
	height: 88rpx;
	overflow: hidden;
	line-height: 88rpx;
	border-bottom: 1rpx solid #e9e9e9;
	.price{
		font-family: "SimHei";
		color: #e33a3a;
		font-size: 34rpx;
	}
	.depart{
		font-size: 26rpx;
		color: #999;
		font-family: "黑体"
	}
}
.title{
	font-size: 34rpx;
	color: #333;
	font-family: "微软雅黑";
	line-height: 44rpx;
	padding-top: 29rpx;
	padding-bottom: 38rpx;
}
.txt{
	overflow: hidden;
	font-size: 28rpx;
	color: #afafaf;
	font-family: "黑体";
}

}
.col{
		width: 100%;
		text-align: center;
		position: relative;
		border-top: 1rpx solid #e8e8e8;
		background:#f5f5f5;
		box-shadow:inset 0px 2rpx 0 #efeff0;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 30rpx;
		.line{
			position: absolute;
			width: 300rpx;
			left: 50%;
			margin-left: -150rpx;
			height: 2px;
			background: #666;
			top: 50%;
			margin-top: -1rpx;
		}
		.t{
		  font-size: 24rpx;
		   color: #666;
		   font-family: "黑体";
		   width: 200rpx;
		   height: 58rpx;
		   top: 2rpx;;
		   position: absolute;
		   left: 50%;
		   margin-left: -100rpx;
		   background:#f5f5f5;
		}
	}
	.col1{
		margin-top:0;
	}
.tabBar{
	margin-top: 30rpx;
}
.page__bd {
  padding-bottom: 0;
}
.weui-tab__content {
 background: #f5f5f5;
}
.weui-navbar__slider_0 {
  left: 29rpx;
  transform: translateX(0);
}
.weui-navbar__slider_1 {
  left: 29rpx;
  transform: translateX(250rpx);
}
.weui-navbar__slider_2 {
  left:29rpx;
  transform: translateX(500rpx);
}
.weui-navbar__title{
	color: #666;
}
.weui-bar__item_on .weui-navbar__title{
	color: #6990f9;
}
.tab1{
	width: 100%;
	padding-bottom: 52rpx;
	background: #fff;
	.item{
		width: 688rpx;
		margin: 0 auto;
		overflow: hidden;
		padding-top: 17rpx;
		padding-bottom: 17rpx;
		border-bottom: 1rpx dashed #979797;
	 .label{
		 width: 228rpx;
		 text-indent: 28rpx;
		 font-size:24rpx;
		 color: #7f7f7f;
	 }
	 .txt{
		 font-size: 24rpx;
		 color: #333;
		 font-size: "黑体";
		 width: 450rpx;
	 }
	}
	border-bottom: 1rpx solid #e8e8e8; 
}
.tabImg{
	width: 100%;
	margin-top: 10rpx;
	text-align: center;
	image{
		width:100%;
	}
}
image{
	height:auto;
	margin: 0;
	padding: 0;
	display:block;
}
.tab3{
	padding-top: 30rpx;
	box-shadow: inset 0px 10rpx 10rpx #f4f4f6;
}
.allContent{
	width: 100%;
	.bar{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		height: 88rpx;
		align-items: center;
		width: 100%;
		background: #fff;
	 .item{
			width: 80%;
			border-bottom:4rpx solid transparent;
			width: 150rpx;
			text-align: center;
			padding-bottom: 8rpx;
			font-size: 30rpx;
		}
	 	.actice{
			 border-bottom: 4rpx solid #6990f9;
			 color: #6990f9;
			 font-weight: bold;
		}
	}
	.barFixed{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;
	}
}