Vue中使用better-scroll实现左右联动效果

在最近的项目中,需要实现点击左侧导航栏直接切换到对应的商品上,下拉右边的商品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();

});

});

},

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容