时间:2021-05-26
better-scroll 是什么
better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。
better-scroll 是基于原生 JS 实现的,不依赖任何框架。它编译后的代码大小是 63kb,压缩后是 35kb,gzip 后仅有 9kb,是一款非常轻量的 JS lib。
今天我们利用它实现一个横向滚动——轮播图组件。演示如下:
首先来整理一下需求:
Mock数据
由于是一个demo,从网上找了几张图片写成json格式,数据用于模拟接口数据。这里用到了mock.js。Axios。安装方法如下:
npm install mockjs
npm install --save axios vue-axios
axios使用方法不多赘述,简述一下mock数据。在mock文件夹下新建json文件夹放置json数据文件。新建index.js导出接口。就可以使用axios请求接口了。
[ "https://img3.mukewang.com/szimg/5df8852609e0762d12000676-360-202.png", "https://img1.mukewang.com/szimg/5d9c62fb0907ccf012000676-360-202.png", "https://img3.mukewang.com/5aeecb1d0001e5ea06000338-360-202.jpg"]const Mock = require('mockjs')Mock.mock('/slider', 'get', require('./json/slider.json'))基础组件:slider.vue
将轮播图组件抽象出来,接收isLoop、isAutoPlay、interval属性控制轮播图。从mounted方法调用顺序可以知道思路是
应用组件:slider-apply.vue
可以根据alider-apply.vue中的使用方法应用在自己的项目中。
<template> <div class="slider-wrapper"> <Slider v-if="showSlider"> <!-- showSlider使得数据请求完成后再显示,否则better-scroll可能会计算错误 --> <div v-for="item in imageList" :key="item" class="slider-item"> <img :src="item" class="img"> </div> </Slider> </div></template><script type='text/ecmascript-6'>import Slider from 'base/slider'export default { data () { return { imageList: [], // 图片列表 showSlider: false // 显示slider标志位 } }, created () { this.getImages() // 获取数据 }, methods: { getImages () { this.axios.get('/slider').then((res) => { this.imageList = res.data this.showSlider = true }).catch((err) => { console.log(err) }) } }, components: { Slider }}</script><style lang="stylus" scoped>.slider-wrapper margin 0 auto height 200px // 固定轮播图显示高度 width 500px // 固定轮播图显示宽度,可设置百分比 background #000 border-radius 5px .slider-item float left // 元素向左浮动 width 100% overflow hidden text-align center .img height 200px width 100%</style>如果以上步骤没有看明白的话,可以在我的github中找到源码https://github.com/Gesj-yean/vue-demo-collection。
总结
到此这篇关于Vue中使用better-scroll实现轮播图组件的文章就介绍到这了,更多相关vue 轮播图组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
根据vue-music视频中slider组建的使用,当安装新版本的better-scroll,轮播组件,不能正常轮播这是因为,better-scroll发布新版
最近使用vue学习开发移动端的项目,使用了bette-scroll插件做滚动。在引入better-scroll的组件中使用@click事件的时候,点击事件失效,
本文实例为大家分享了vue滚动插件better-scroll的具体代码,供大家参考,具体内容如下1.概述1.1说明better-scroll是一款重点解决移动端
一、首先安装安装npminstallbetter-scroll--save二、并在组件中引用importBScrollfrom‘better-scroll'te
本文实例为大家分享了vue基于better-scroll实现左右联动滑动页面,供大家参考,具体内容如下界面如下:vue模板{{good.name}}{{good