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 图片懒加载插件。

转载于:https://www.cnblogs.com/zhuzhenwei918/p/6929489.html

vue-scroller的使用开发自己的 scroll 插件相关推荐

Flask Vue.js全栈开发
Flask Vue.js全栈开发的最新完整代码及使用方式本系列的最新代码及使用方式将持续更新到: http://www.madmalls.com/blog/post/latest-code/ 1 ...
spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
Vue.js组件化开发实践
Vue.js组件化开发实践前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
spring boot + vue + element-ui全栈开发入门
今天想弄弄element-ui 然后就在网上找了个例子感觉还是可以用的第一步是完成了果断拿过来放到我这里这下面直接是连接点进去就可以用啊本想着不用vue 直接导入连接 ...
Spring Boot和Vue的学习(一)--开发环境的安装
前言闲来无事,想学一些框架,查了一些资料,说用前后端分离开发比较主流,同时比较热门的是Spring Boot+Vue开发,久仰大名,现在正好学习一下. 学习视频:4小时学会Spring Boot+V ...
Vue 全家桶 + Electron 开发的一个跨三端的应用 1
代码地址如下: http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
html5 plus与vue,基于Html5 Plus + Vue + Mui 移动App 开发（二）
基于Html5 Plus + Vue + Mui 移动App 开发(二) 界面效果: 本页面采用Html5 Plus + Vue + Mui 开发移动界面,本页面实现: 1.下拉刷新.上拉获取更多功能 ...
【Vue US国际会议】使用Vue和NativeScript来开发吸引人的原生手机app
历来,搞web开发和搞手机开发的,都是两个阵营.不过,这些年,这个阵营的割裂也在逐渐模糊,尤其是随着web技术统治一切的风潮到来,当然这期间javascript在期间发挥了主要作用,比如我们熟知的VS ...
维基媒体宣布采用 Vue.js 进行前端开发
责编 | 张红月出品 | CSDN(ID:CSDNnews) 维基媒体工作人员 Volker E. 在官网宣布, Vue.js 被选为维基媒体官方 JavaScript 框架.前端架构评估工作于 2 ...

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

vue-scroller的使用

开发自己的 scroll 插件

vue-scroller的使用开发自己的 scroll 插件相关推荐

最新文章

热门文章

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

vue-scroller的使用

开发自己的 scroll 插件

vue-scroller的使用 开发自己的 scroll 插件相关推荐

最新文章

热门文章

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

vue-scroller的使用开发自己的 scroll 插件相关推荐