wannaxiao / Vue Slim Better Scroll
Licence: mit
💇♀️ 简洁易用的/渐进式的 vue 移动端滚动组件,仿QQ的下拉刷新和上拉滚动无限加载体验
Stars: ✭ 124
Labels
Projects that are alternatives of or similar to Vue Slim Better Scroll
Mobilebone
Single Page Switching bone(include page manage, events manage) for mobile web APP, Hybrid APP, Phonegap, PPT, Single-Screen PC page...
Stars: ✭ 1,357 (+994.35%)
Mutual labels: mobile-web
React Div 100vh
A workaround for the '100vh' issue in mobile browsers
Stars: ✭ 707 (+470.16%)
Mutual labels: mobile-web
Awesome Mobile Web Development
All that you need to create a great mobile web experience
Stars: ✭ 1,046 (+743.55%)
Mutual labels: mobile-web
Countly Sdk Cordova
Countly Product Analytics SDK for Cordova, Icenium and Phonegap
Stars: ✭ 69 (-44.35%)
Mutual labels: mobile-web
Vkui
VKUI – это набор React-компонентов, с помощью которых можно создавать интерфейсы, внешне неотличимые от наших iOS и Android приложений.
Stars: ✭ 485 (+291.13%)
Mutual labels: mobile-web
Mobiscroll
Cross platform UI controls for progressive web and hybrid apps (plain JS, jQuery, Angular and React)
Stars: ✭ 1,510 (+1117.74%)
Mutual labels: mobile-web
Storybook Mobile
A storybook addon that helps you create truly mobile-friendly components
Stars: ✭ 93 (-25%)
Mutual labels: mobile-web
Whatwebcando
An overview of the device integration HTML5 APIs
Stars: ✭ 756 (+509.68%)
Mutual labels: mobile-web
H5ui
Lightweight, elegant open source mobile UI style library.
Stars: ✭ 44 (-64.52%)
Mutual labels: mobile-web
Calenstyle
Responsive Drag-&-Drop Event Calendar Library for Web, Mobile Sites, Android, iOS & Windows Phone
Stars: ✭ 83 (-33.06%)
Mutual labels: mobile-web
Weui
A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.
Stars: ✭ 26,030 (+20891.94%)
Mutual labels: mobile-web
Jscost.org
JSCost.org - a JavaScript cost visualizer 💸
Stars: ✭ 101 (-18.55%)
Mutual labels: mobile-web
Angular Responsive Tables
Make your HTML tables look great on every device
Stars: ✭ 69 (-44.35%)
Mutual labels: mobile-web
Geomapping With Unity Mapbox
Geomap is the virtualization of data that maps a Country. Mapbox Unity SDK gives data(Global map layers of Streets, Buildings, Elev, and Satellite) generating custom 3D worlds for Mobile VR/AR apps.
Stars: ✭ 118 (-4.84%)
Mutual labels: mobile-web
Embla Carousel
A lightweight carousel library with fluid motion and great swipe precision.
Stars: ✭ 1,874 (+1411.29%)
Mutual labels: mobile-web
Leaflet Gps
Simple leaflet control plugin for tracking gps position
Stars: ✭ 90 (-27.42%)
Mutual labels: mobile-web
vue-slim-better-scroll
开箱即用的/渐进式的 vue 移动端滚动组件/插件,基于better-scroll
✨ 特性
-
极简使用
- 零配置/渐进式配置
- 自动刷新滚动高度
-
更优性能
- 使用 transform 替代 position ,下拉刷新不再掉帧
-
更好体验
- 滚动内容小于滚动视口时,也可以滚动/回弹/下拉刷新/上拉加载
- 多次下拉刷新节流
- 多处细节改进
-
更小体积
- v1.5.0+ 使用 dio 构建,仅 25k (旧版本为 webpack 构建,体积 47k)
- v1.6.0+ 抛弃 gif,使用 css 重构 Loading。体积近一步减小,仅 21k
🐠 示例&文档
🚀 快速开始
- 安装
yarn add vue-slim-better-scroll # 或 npm i -S vue-slim-better-scroll
- 引入
- 插件形式全局引入
// 入口文件 main.js 中
import Scroll from 'vue-slim-better-scroll'
Vue.use(Scroll)
- 组件形式引入
// *.vue 中
import Scroll from 'vue-slim-better-scroll'
export default {
/* ... */
components: {
Scroll,
},
/* ... */
}
- 使用它,请参考Demo 源码
<!-- 简单场景 -->
<Scroll
ref="scroll"
:autoUpdate="true"
@pullingDown="loadRefresh"
@pullingUp="loadMore">
<!-- 滚动的内容 -->
</Scroll>
<!-- 复杂场景 -->
<Scroll
ref="scroll"
:updateData="[data]"
:refreshData="[]"
@pullingDown="loadRefresh"
@pullingUp="loadMore">
<!-- 滚动的内容 -->
</Scroll>
源码在 src/ 目录下,注释完善。整个项目结构简洁,构建、eslint、babel 都拆分为独立模块,是一个可供学习的标准项目。
😉😘 如果它对你有所帮助,可以点一下 ⭐️Star ~
License
Copyright (c) 2018-present, momoko
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].