vue-scroller的使用 && 开发自己的 scroll 插件

vue-scroller的使用

　在spa开发过程中，难免会遇到使用scroll的情况，比如下面的：



　即，当用户选择好商品之后，点击购物车，就会有一个购物车弹窗，如果选择的商品小于三个，刚好合适，如果多余三个，我们就需要使其滚动了。

　　

　而 vue-scroller 就可以很好的实现滚动上面的问题。 这个文件可以很容易进行测试。

　使用过程可以参考github。 这是他的demo、

　这里只提几点需要注意的:

"main": "dist/vue-scroller.min.js", 这是package.json中的入口文件。

使用时一般都是直接引入，然后 Vue.use(); 即可。

　　

<scroller style="width: 2.4rem!important">
<!-- 循环显示分类 -->
<div class="kind" v-for="item,index in items">
<a v-bind:href="'#anchor'+index" v-bind:class="{active: index==0}"  v-on:click="getContent(item.id, $event)">{{item.name}}</a>

<!-- 控制分类中是否显示数目，主要使用了reduce来计算总数 -->
<span class="number" v-if="(typeof numbers[index] == 'undefined') ? false : (numbers[index].reduce(function (prev, current) {return ((typeof prev == 'undefined') ? 0 : prev) + ((typeof current == 'undefined') ? 0 : current);}) > 0)" >
{{(typeof numbers[index] == "undefined") ? "" : numbers[index].reduce(function (prev, current) {return ((typeof prev == "undefined") ? 0 : prev) + ((typeof current == "undefined") ? 0 : current);})}}
</span>
</div>
</scroller>

　即只需要将 需要滑动部分包裹在 scroller 中就可以了，其中scroller的高度默认是100%， 所以如果希望调节高度，最好的办法是调节scroler外层div的高度。

开发自己的 scroll 插件

　　使用别人写好的插件总是不太好的，因为针对于当前项目而言，我只是希望实现一个scoll的功能，而对上拉、下拉等功能是没有需要的，所以使用这么大的插件是没有必要的。 我们可以根据自己的需求来开发适合自己项目使用的插件。

　　

　　

推荐： https://github.com/hilongjw/vue-lazyload 图片懒加载插件。