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 相关文章推荐
Dom在ajax技术中的作用说明
Oct 25 Javascript
EasyUI中的tree用法介绍
Nov 01 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
javascript四舍五入函数代码分享(保留后几位)
Dec 10 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
Jan 30 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
详解JavaScript匿名函数和闭包
Jul 10 Javascript
AJAX学习笔记
May 18 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 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
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
Prototype使用指南之base.js
2007/01/10 Javascript
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
JS 实现Table相同行的单元格自动合并示例代码
2013/08/27 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
打开电脑上的QQ的python代码
2013/02/10 Python
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
python使用itchat实现手机控制电脑
2018/02/22 Python
解决Mac下首次安装pycharm无project interpreter的问题
2018/10/29 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
Python 异常处理Ⅳ过程图解
2019/10/18 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
国培计划培训感言
2014/03/11 职场文书
保护环境建议书400字
2014/05/13 职场文书
离婚协议书范本及离婚须知
2014/10/15 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
MySQL新手入门进阶语句汇总
2022/09/23 MySQL