Vue中使用better-scroll实现左右联动效果
2017-07-31 本文已影响0人
向上十五度
在最近的项目中，需要实现点击左侧导航栏直接切换到对应的商品上，下拉右边的商品List需要定位到对应左侧导航栏。
前提：使用webstome开发环境
第一步：
在package.json中添加对应的依赖包
"better-scroll":"^0.1.7"
第二步：在自己项目的目录下执行cnmp install 命令
C:\Users\12345\Desktop\sell>cnmp install
第三步：在<script type="text/ecmascript-6">下导入所依赖的文件
importBScroll from'better-scroll';
第四步：在需要联动的控件上加入以下代码
ref="meunWrapper"
_initScroll() {
this.meunScroll = new BScroll(this.$refs.menuWrapper, {
click: true
});
created() {
this.classMap= ['decrease','discount','special','invoice','guarantee'];
this.$http.get('/api/goods').then((response) => {
this.$nextTick(() => {
this._initScroll();
});
});
},
