vue-cli 使用better-scroll

 better-scroll  api文档https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/

一：安装better-scroll 插件

cnpm install better-scroll --save

二：引入

import Bscroll from 'better-scroll'

三：使用

页面结构要符合这样的，不一定非要div->ul->li但是必须最外层div要包裹一个大包

<div class="wrapper"><ul class="content"><li>...</li><li>...</li> ...</ul><!-- 这里可以放一些其它的 DOM，但不会影响滚动 --> </div>

示例代码

<template><div class="recommend_box" ref='wrapper'><ul class="my_list"><li v-for="item in arr">第一条数据</li></ul></div> </template><script>import Bscroll from 'better-scroll'export default{data(){return{arr:["1","2","3","4","5","6","7","8","9","10","1","2","3","4","5","6","7","8","9","10"]}},mounted(){this.$nextTick(() => {this.scroll = new Bscroll(this.$refs.wrapper);});}} </script><style scoped="scoped" lang="stylus">.recommend_box{overflow: hidden;height:5rem;/*position: absolute;top:7rem;left:0;right:0;bottom: 0;*/}.my_list{padding: 0.2rem;} </style>

这里具体说说style样式问题：

这里分两种：

style_one:设置一个高度然后设置溢出隐藏

overflow: hidden; height:5rem;

style_two:设置定位以及溢出隐藏

position: absolute; top:7rem; left:0; right:0; bottom: 0;

这两种方式都可以实现，但是style_two会出现时好时坏的情况。

 

转载于:https://www.cnblogs.com/wanan-01/p/10119383.html

总结

以上是生活随笔为你收集整理的vue-cli 使用better-scroll的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。