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

微信小程序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">
 
   
      <div class="container">
        <div class="page__bd page__bd_spacing">
          <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular" @change="swiperChange" @animationfinish="animationfinish">
            <div v-for="item in imgUrls" :key="index">
              <swiper-item>
                <image :src="item" class="slide-image" />
              </swiper-item>
            </div>
          </swiper>
        </div>
      </div>
      <div class="content">
        <div class="art">
            <div class="info">
            <div class="left price">参考价: &yen;110.00</div>
            <div class="right depart">互联网业务拓展部</div>
          </div>
          <div class="title">
            唱吧麦克风ELF-黑色,赠 唱吧胶囊麦克风ELF防风罩-黑色
          </div>
          <div class="txt">
            <div class="left">
              HPON1DG04PA#AB2
            </div>
            <div class="right">
              0   000
            </div>
          </div>
        </div>
      </div>
     
     <div class="allContent">
       <div :class="scrollTop>=550?'bar barFixed':'bar'">
          <div :class="currentTab==0?'item actice':'item'" @click="scrollTo1(0)">
           参数规格
          </div>
          <div :class="currentTab==1?'item actice':'item'" @click="scrollTo1(1)">
            包装售后 
          </div>
          <div :class="currentTab==2?'item actice':'item'" @click="scrollTo1(2)">
            图文详情
          </div>
       </div>
       <div class="tabContent">
          <div class="tabs1" id="tabs1">
              <div class="col col1">
                            <div class="line"></div>
                            <div class="t">
                             参数规格
                            </div>
                        </div>
                        <div class="tab1">
                            <div class="item">
                              <div class="left label">
                                商品编码:
                              </div>
                              <div class="left txt">
                                HPON1DG04PA#AB2商品编商品编商品
                              </div>
                            </div>
                            
                             <div class="item">
                              <div class="left label">
                                产品线
                              </div>
                              <div class="left txt">
                                HPON1DG04PA#AB2
                              </div>
                            </div>

                             <div class="item">
                              <div class="left label">
                                产品线
                              </div>
                              <div class="left txt">
                                HPON1DG04PA#AB2
                              </div>
                            </div>

                             <div class="item">
                              <div class="left label">
                                产品线
                              </div>
                              <div class="left txt">
                                HPON1DG04PA#AB2
                              </div>
                            </div>

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

                             <div class="item">
                              <div class="left label">
                                商品编码:
                              </div>
                              <div class="left txt">
                                HPON1DG04PA#AB2商品编商品编商品
                              </div>
                            </div>

                             <div class="item">
                              <div class="left label">
                                商品编码:
                              </div>
                              <div class="left txt">
                                HPON1DG04PA#AB2商品编商品编商品
                              </div>
                            </div>

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

   

</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;
	}
}

分享本文至:

评论 0

挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论