2、import BScroll from 'better-scroll' 引入
html代码
<div class="goods">
<div class="menu-wrapper" ref="menuWrapper">
<ul>
<li @click="selectMenu(index,$event)" v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex===index}">
<span class="text">{{item.type}}{{item.nikename}}--{{index}}++{{currentIndex}}</span>
</li>
</ul>
</div>
<div class="foods-wrapper" ref="foodWrapper">
<ul>
<li v-for="item in goodslist" class="goodlistli food-list-hook"></li>
</ul>
<script>
import axios from 'axios'
import $ from 'jquery'
import qs from 'qs'
//引入better-scroll
import BScroll from 'better-scroll'
const ERR_OK = 1;//判断是否获取成功
export default{
data () {
return {
goods:[],
goodslist:[],
imgsrc: '../../../../static/images/',
listHeight:[], //右侧高度列表
scrollY:0 //右侧滚动上部的距离
};
},
computed:{
//实时计算右侧滚动栏滚动的位置 及相应到相应的左侧栏中
currentIndex(){
for(let i=0;i<this.listHeight.length;i++){
let height1=this.listHeight[i];
let height2=this.listHeight[i+1];
if(!height2||(this.scrollY>=height1&&this.scrollY<height2)){
return i;
}
}
return 0;
},
},
created(){
//获取左侧及右侧内容
var _this=this;
axios.post(...).then((res)=>{
this.goods=res.data.data.hudong;
this.goodslist=res.data.data.hotRecom;
//更新dom异步 保证dom已经加载好$nextTick()；
this.$nextTick(()=>{
this._initScroll();
this._calculateHeight();
});
});
},
methods:{
//BScroll初始化
_initScroll(){ //BScroll接收两个参数dom对象 和json Bscroll默认阻止事件 加click事件无反应 设置参数click:true即可
this.menuScroll=new BScroll(this.$refs.menuWrapper,{click:true});
//传入probeType:3 检测实时得到滚动的位置
this.foodsScroll=new BScroll(this.$refs.foodWrapper,{probeType:3});
this.foodsScroll.on('scroll',(pos)=>{ //滚动时实时拿到滚动的距离
this.scrollY=Math.abs(Math.round(pos.y));
})
},
//计算foodlist高度
_calculateHeight(){
//获取值
let foodList=this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
let height=0;
this.listHeight.push(height);
for(let i=0;i<foodList.length;i++){
let item=foodList[i];
height+=item.clientHeight;
this.listHeight.push(height); //递增的区间数组
}
},
//点击左侧菜单 右侧联动
selectMenu(index,event){
// event._constructed移动端属性特有的属性 如果是pc端就是!event._constructed
if(!event._constructed){
return;
}
//获取值
let foodList=this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
let el=foodList[index];
this.foodsScroll.scrollToElement(el,300);
//console.log(index);
}
}
}
</script>
<style>
/*头部*/
.wrapper .header{ height: 174px;}
.wrapper .header img{ width: 100%;height: 174px;}
.wrapper .fooder{ position: fixed; bottom:0; width:100%;height: 40px; background: #0FC4A4; color: #fff; text-align: center; line-height: 40px;}
.goods{ position: absolute; top:174px; bottom:40px; border:1px solid #c03; box-sizing: border-box; width: 100%; overflow: hidden; display: flex;}
/*左侧导航列表*/
.menu-wrapper{ flex: 0 0 80px;/*宽度80px*/ width: 80px;/*如果不定义宽度安卓浏览器会有问题*/ background: #f3f5f7;}
.foods-wrapper{ flex: 1;}
.menu-item{ display: table; height: 104px; width: 60px; padding:0 10px;line-height: 20px; font-size: 16px;}/*垂直居中*/
.menu-item .text{ display: table-cell; vertical-align:middle; width: 60px;text-align: center; }
/*右侧商品列表*/
.goodlistli{ padding: 10px 0;}
.box-flex{ display: flex; align-items: center; padding-bottom: 10px;}
.box-flex .img{ width: 100px; height: 100px; border: 1px solid #ccc;margin-right: 10px;}
.box-flex .img img{width: 100px; height: 100px;}
.box-flex .con{}
.class_p{ padding: 5px 10px;}
/*加减购物车*/
.jiajia_btn span{border-radius: 100%; background: #0fc4a4; text-align: center; line-height: 25px; font-size: 20px; width: 25px; height: 25px; display: inline-block; color: #fff;}
.jiajia_btn span:first-child{float: left; }
.jiajia_btn span:last-child{float:right; }
.border_1px{ position: relative;}
.border_1px:after{ position: absolute; left: 0; bottom:-10px ;width: 100%; content: ''; border-top: 1px solid #ccc;}
.current{ background: #c03;}
</style>