vue滚动插件better-scroll使用详解


Posted in Javascript onOctober 18, 2019

本文实例为大家分享了vue滚动插件better-scroll的具体代码,供大家参考,具体内容如下

1. 概述

1.1 说明

better-scroll是一款重点解决移动端(已支持PC)各种滚动场景需求的插件。例如淘宝聚划算中的类型选择(女装/家纺/生鲜美食等),没有滚动条显示却实现了滚动功能。

1.2 better-scroll安装

npm install better-scroll --save 安装至项目中

1.3 better-scroll使用

better-scroll常见应用场景(列表滚动)的html结构:

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

备注:better-scroll是作用在外层wrapper容器上的,滚动的部分是content元素。并且better-scroll只处理容器(wrapper)的第一个子元素(content)的滚动,其他的元素都会被忽略。

better-scroll初始化代码:

better-scroll提供了一个类,实例化的第一个参数是一个原生的DOM对象,如果不是传递的对象,而是传递的字符串(类名或者id),better-scroll内部会尝试调用querySelector去获取这个DOM对象。

<->直接传递DOM对象

import BScroll from 'better-scroll'
let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)

<二>传递字符串,使better-scroll内部去获取DOM对象

import BScroll from 'better-scroll'
let scroll = new BScroll('.wrapper')

2. 代码

2.1 代码示例

2.1 子组件scrollChild(横向滚动组件)

<template>
 <div class='move-tabs'>
 <div class='tabs-wrapper' ref='tabsWrapper'>
  <ul ref='tab'>
  <li v-for='(item, index) in tabs' :key='index'>
   <div class='tab-item'>
   <div class='expand-block'>
    {{item.name||'无'}}
   </div>
   </div>
  </li>
  </ul>
 </div>
 </div>
</template>
<script>
 import BScroll from 'better-scroll'

 export default {
 props: {
  data: Array,
 },
 data() {
  return {
  tabs: [],
  mX: 0,
  tabWidth: 300,
  }
 },
 mounted() {
  this.$nextTick(() => {
  console.log(this.data)
  this.tabs = this.data
  this._initMenu()
  })
 },
 methods: {
  _initMenu() {
  const tabsWidth = this.tabWidth
  const width = this.tabs.length * tabsWidth
  this.$refs.tab.style.width = `${width}px`
  this.$nextTick(() => {
   if (!this.scroll) {
   this.scroll = new BScroll(this.$refs.tabsWrapper, {
    scrollX: true,
    eventPassthrough: 'vertical',
   })
   } else {
   this.scroll.refresh()
   }
  })
  },
 },
 }
</script>
<style scoped>
 .move-tabs {
 position: relative;
 top: 0;
 bottom: 0;
 width: 100%;
 }
 .tabs-wrapper {
 height: 120px;
 width: 100%;
 box-sizing: border-box;
 overflow: hidden;
 white-space: nowrap;
 }
 .tab-item {
 float: left;
 width: 280px;
 height: 120px;
 padding: 10px;
 margin-right: 20px;
 background: #f5f5;
 box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
 border-radius: 4px;
 }
 .expand-block {
 font-size: 30px;
 font-weight: bold;
 color: #333333;
 }
</style>

2.1 父组件scrollParent(调用子组件)

<template>
<div>
 <child-scroll :data='scrollList' />
</div>
</template>

<script>
 import ChildScroll from '../components/scrollChild'
 export default {
 name: "scrollParent.vue",
 components: {
  ChildScroll,
 },
 data(){
  return {
  scrollList:[
   {name:'北京'},
   {name:'上海'},
   {name:'杭州'},
   {name:'广州'},
   {name:'郑州'},
   {name:'深圳'},
   {name:'合肥'},
   {name:'徐州'},
   {name:'西安'},
   {name:'石家庄'},
   {name:'呼和浩特'},
   {name:'兰州'},
   {name:'包头'},
   {name:'重庆'},
  ]
  }
 },
 }
</script>

<style scoped>

</style>

2.2 结果展示

可左右滑动出所需要展示的列表集合

vue滚动插件better-scroll使用详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
angularJS中router的使用指南
Feb 09 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 Javascript
VUE实现密码验证与提示功能
Oct 18 #Javascript
VUE实现图片验证码功能
Nov 18 #Javascript
countUp.js实现数字滚动效果
Oct 18 #Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 #Javascript
细述Javascript的加法运算符的具体使用
Oct 18 #Javascript
ElementUI之Message功能拓展详解
Oct 18 #Javascript
js实现简易计算器功能
Oct 18 #Javascript
You might like
社区(php&amp;&amp;mysql)一
2006/10/09 PHP
php实例分享之二维数组排序
2014/05/15 PHP
Thinkphp实现自动验证和自动完成
2015/12/19 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
jQuery Animation实现CSS3动画示例介绍
2013/08/14 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
Angular2环境搭建具体操作步骤(推荐)
2017/08/04 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
vue实现分页加载效果
2019/12/24 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
js实现盒子拖拽动画效果
2020/08/09 Javascript
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
Flask-WTF表单的使用方法
2019/07/12 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
Python2与Python3的区别点整理
2019/12/12 Python
python实现数字炸弹游戏
2020/07/17 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
世界上最大的专业美容用品零售商:Sally Beauty
2017/07/02 全球购物
车间班组长岗位职责
2013/11/13 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang