微信小程序mpvue使用锚点，滚动到指定位置
emer 发布于 2018-8-21 15:09 5858 次阅读
使用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">参考价： ¥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;
}
}