vue滚动插件better-scroll使用详解
本文实例为大家分享了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-cli项目中用json-sever搭建mock服务器
这篇文章主要介绍了详解vue-cli项目中用json-sever搭建mock服务器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-11-11使用Vue.js和Element-UI做一个简单登录页面的实例
下面小编就为大家分享一篇使用Vue.js和Element-UI做一个简单登录页面的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论