• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue-better-scroller: 一款基于 better-scroll.js 为 vue.js 提供 scroll 滚动,上拉 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

vue-better-scroller

开源软件地址:

https://gitee.com/Devifish/vue-better-scroller

开源软件介绍:

vue-better-scroller

一款基于 better-scroll.js (已内置依赖无需导包)
为 vue.js 提供 scroll 滚动,上拉加载, 下拉刷新
使用 es6, vue-cli 3 构建

特点

  • 得益于 better-scroll 使用 css3 transform3d 硬件加速实现滚动
    即使千条数据也不会有卡顿掉帧
  • 使用 css3 calc 实现内部高度,避免使用原生better-scroll的不愉快
  • 尽量减少用户配置可渐进式添加功能

安装

NPM安装

$ npm install vue-better-scroller

也可手动下载Common JS 及 UMD JS手动导入编译好的js文件 放于 dist 文件夹

使用

main.js 文件中引入插件并注册

# main.jsimport Scroll from "vue-better-scroller";Vue.use(Scroll)
<template>  <scroll>    <li></li>    <li></li>    <li></li>    <li></li>  </scroll></template>

文档

组件 attr 参数文档

名称 功能 默认值 可选值
data 用于监听数据变化停止上拉下拉状态 object / array
scrollbar 是否显示滚动条 false true / false
direction(开发中) 滚动方向 vertical vertical / horizontal
bounce 各方向回弹效果开关 { top: true, bottom: true, left: true, right: true } 修改相应参数即可
options 可选功能(如开启关闭上拉加载下拉刷新) { pullup: false, pulldown: false, click: true, probeType: 0 } 修改相应参数即可

例子

  • 单独使用滚动(添加滚动回弹效果及滚动条)

      <scroll :scrollbar="true">    <li></li>    <li></li>    <li></li>    <li></li>  </scroll>
  • 添加上拉刷新及下拉加载

      <scroll :options="{ pullup: true, pulldown: true }" :ref="scroll">    <li></li>    <li></li>    <li></li>    <li></li>  </scroll>

    注意: 在上拉加载结束后需要调用

      this.$refs.scroll.pullupEnd();

    关闭上拉加载功能

效果

下面截图于本人公司项目DEMO实现 因此无法提供DEMO代码


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap