vue-mobile-loadmore
移动端,h5/webapp, 简易的上拉加载,下拉刷新。
Install
npm install vue-mobile-loadmore --save
Usage in ES2015/ES6:
// 在单页内引用 import vueLoadMore from 'vue-mobile-loadmore' new Vue({ components: { vueLoadMore } })
.important vue-load-more( ref = 'loadMore', :option = 'option', // option (require: true) v-on:startLoading = 'startLoad', v-on:startRefresh = 'startRefresh') .body p(v-for='x in 100') 123123 ... 用的pug,请自行转化html
全局修改css, 来调整样式,注意权重 #load-more-vue .wrap .vue-scroll-body span.refresh-mes img.refresh-img span.loading-mes img.loading-img ...
new Vue({ el: '#app', data() { return { option: { refresh_message: '快松手', loading_message: '别拉了', refresh_img: require('../assets/images/load-more/loading.gif'), loading_img: require('../assets/images/load-more/loading.gif') } } }, methods: { startLoad() { console.log('startLoading') // take your owner method such as 'refreshList()' setTimeout(() => { this.loadFinish() }, 500) }, startRefresh() { console.log('startRefresh') // take your owner method such as 'getList()' setTimeout(() => { this.loadFinish() }, 500) }, loadFinish() { // when you get the async data, use this method and it will stop the animation this.$refs.loadMore.loadingFinish() } });
Usage in CDN
You can use with <script>
:
<vue-load-more ref = 'loadMore', :option='option', // option (require: true) v-on:startLoading = 'startLoad', v-on:startRefresh = 'startRefresh'> <div class="body"> <p v-for='x in 100'>123123</p> </div> </vue-load-more> <script src="xxx/vue.js"></script> <script type="text/javascript" src='vue-loadmore.js'></script> <script> var app = new Vue({ el: "#app", data() { return { option: { refresh_message: '快松手', loading_message: '别拉了', refresh_img: 'XXXX/loading.gif', loading_img: 'XXXX/loading.gif' } } } }) </script>
Options
Option | Description |
---|---|
refresh_message | 下拉刷新的提示字段 |
loading_message | 上拉加载的提示字段 |
refresh_img | 下拉刷新的loading.gif |
loading_img | 上拉加载的loading.gif |
Development
Command | Description |
---|---|
npm run build | Build in umd format |
License
MIT