基于vue2.0以及better-scroll实现scroll滑动组件及所实现组件的应用例子

直接上源码：

组件：scroll.vue，需要先npm install better-scroll

<template><div ref="wrapper"><slot></slot></div>
</template><script type="text/ecmascript-6">import BScroll from 'better-scroll'const DIRECTION_H = 'horizontal'const DIRECTION_V = 'vertical'export default {props: {probeType: {type: Number,default: 1},click: {type: Boolean,default: false},listenScroll: {type: Boolean,default: false},data: {type: Array,default: null},pullup: {type: Boolean,default: false},beforeScroll: {type: Boolean,default: false},refreshDelay: {type: Number,default: 20},direction: {type: String,default: DIRECTION_V}},mounted() {setTimeout(() => {this._initScroll()}, 20)},methods: {_initScroll() {if (!this.$refs.wrapper) {return}this.scroll = new BScroll(this.$refs.wrapper, {probeType: this.probeType,click: this.click,eventPassthrough: this.direction === DIRECTION_V ? DIRECTION_H : DIRECTION_V})if (this.listenScroll) {this.scroll.on('scroll', (pos) => {this.$emit('scroll', pos)})}if (this.pullup) {this.scroll.on('scrollEnd', () => {if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {this.$emit('scrollToEnd')}})}if (this.beforeScroll) {this.scroll.on('beforeScrollStart', () => {this.$emit('beforeScroll')})}},disable() {this.scroll && this.scroll.disable()},enable() {this.scroll && this.scroll.enable()},refresh() {this.scroll && this.scroll.refresh()},scrollTo() {this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)},scrollToElement() {this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)}},watch: {data() {setTimeout(() => {this.refresh()}, this.refreshDelay)}}}
</script><style scoped lang="stylus" rel="stylesheet/stylus"></style>

应用方法：

引入并注册组件：

  import Scroll from 'base/scroll/scroll'export default {components: {Scroll}}

template结构以及style：

效果：图中轮播图+列表为滚动区域（recommend-content），即需要滚动的内容；对应的class：slider为轮播图，recommend-list为列表。由于轮播图数据以及list数据为动态获取，实际使用请填充你的数据，以上只给出关键结构。

已实现滚动：

基于vue2.0以及better-scroll实现scroll滑动组件及所实现组件的应用例子相关推荐

基于vue2.0实现音乐/视频播放进度条组件的思路及具体实现方法+代码解释
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进 ...
基于vue2.0 + elementUI 后台管理平台
Vue-Admin-Demo 这是一个基于vue2.0 + elementUI 后台管理平台 Github: https://github.com/xiahuahua/vue-vux-demo(欢迎S ...
基于vue2.0打造移动商城页面实践 vue实现商城购物车功能基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果...
基于vue2.0打造移动商城页面实践地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能地址:http://www.jb51.net/art ...
基于vue2.0的一个豆瓣电影App
1.搭建项目框架使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...
Muse UI — 基于 Vue2.0 的 Material Design UI 库
Vue 2.0 发布以来,很多 vue 的开源项目都开始了升级计划,我也思考着 vue-carbon 的升级之路,9月开工,11月完工, Muse UI 闪亮登场. 先睹为快 Muse UI 主要用于 ...
基于vue2.0+ 抽奖项目
前言临近年关抽奖活动,基于vue2.0+开发的抽奖项目. 便于查看效果,贴上相关地址: 在线示例地址:快速访问 github地址:查看源码简介基于vue.js抽奖项目,截屏保存每次抽奖图片至本地 ...
vue tree组件_基于 Vue2.0 和 HeyUI 组件库的中后端系统 HeyUI Admin
介绍 heyui-admin 是一个成熟的企业应用解决方案,基于 vue2.0 和 heyui 组件库的中后端系统. 功能 - Js - common / 通用 - ajax / 封装axios - ...
基于 Vue2.0 的移动端 / PC 端验证码输入组件.
vue-input-code 基于Vue2.0的移动端验证码输入组件. 功能预览输入回调完成回调自定义验证码个数样式可控这里是可爱的Demo 支持支持 Vue.js 2.0+. 安装和使用 ...
基于VUE2.0的高仿饿了么分析与总结
2019独角兽企业重金招聘Python工程师标准>>> 首先,慕课网提供的视频是基于vue1.0的规范写的,因此有一些地方在vue2.0下不能正常运行.虽然课程补充文件也提供了vue ...

基于vue2.0以及better-scroll实现scroll滑动组件及所实现组件的应用例子

基于vue2.0以及better-scroll实现scroll滑动组件及所实现组件的应用例子相关推荐

最新文章

热门文章