better-scroll
1.
现在package.json 直接写入 "better-scroll":"^0.1.12" 版本以github上为准
2.
cpnm install 在node_modules 可以查看版本是否安装
3.
直接在你的组件里面写入
import BScroll from 'better-scroll';
import BScroll from 'better-scroll';
import data from '../../static/data.json';
export default {
data () {
return {
goods: [],
listHeight: [], //
scrolly: 0, //
};
},
created() {
this.goods = data.goods;
this.$nextTick(() => {
this._initScroll();
this._calculateHeight();
});
this.classMap = [];
},
computed: {
currentIndex() {
for (let i = 0; i < this.listHeight.length; i++) {
let height = this.listHeight[i];
let height2 = this.listHeight[i + 1];
if (!height2 || (this.scrolly >= height && this.scrolly < height2)) {
return i;
}
}
return 0;
},
selectFoods() {
let foods = [];
this.goods.forEach((good) => {
good.foods.forEach((food) => {
if (food.count) {
foods.push(food);
}
});
});
return foods;
}
},
methods: {
_initScroll() {
this.menuScroll = new BScroll(this.$refs.menuWrapper, {
click: true
});
this.foodScroll = new BScroll(this.$refs.foodWrapper, {
probeType: 3,
click: true
});
this.foodScroll.on('scroll', (pos) => {
this.scrolly = Math.abs(Math.round(pos.y));
});
},
//获取右侧商品 每个大类的高度 *自动获取clientheight 大类的高度
_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) {
console.log(index)
if (!event._constructed) {
// 去掉自带click事件的点击
return;
}
let foodList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
let el = foodList[index];
this.foodScroll.scrollToElement(el, 300);
},
}
}.good {
display: flex;
position: absolute;
width: 100%;
top: 174px;
bottom: 4px;
overflow: hidden;
}
.menu-wrapper{ float: left;
flex: 0 0 80px;
width: 80px;
background: #f3f5f7;}
.menu-wrapper li{ font-size: 0.4em; height:60px; border-bottom: 1px solid #fff;}
.foods-wrapper{ float: left; width:200px;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
vertical-align: baseline;
flex: 1;}
.current {background: red; color:#fff; font-weight: bold;}
.food-item{ height: 200px; overflow: hidden;}
