vue-slide-for-more

Repository

https://github.com/livelybone/vue-slide-for-more

Example

请使用移动端浏览器或者 chrome devtools 查看

Please see it at mobile browser of chrome devtools.

Code


new Vue({
el: '#app',
template: '<slide-for-more v-if="isMobile"' +
' tipHeight=".4rem"' +
' :isSearching="isSearching"' +
' @refresh="refresh"' +
' @loadMore="loadMore">' +
' <div v-for="(c, i) in list"' +
' :key="i"' +
' class="item">{{c}}</div>' +
' </slide-for-more>' +
' <div v-else' +
' class="tip-wrap">' +
' <p class="tip">请使用移动端浏览器或者 chrome devtools 查看</p>' +
' <p class="tip">Please see it at mobile browser of chrome devtools.</p>' +
' </div>',
data: function () {
return {
list: ['content', 'content', 'content', 'content'],
isMobile: window.isMobile,
isSearching: false
}
},
methods: {
refresh: function () {
this.search((function () {
this.list = this.list.slice(0, 4)
}).bind(this))
},
loadMore: function () {
this.search((function () {
this.list.push('content')
}).bind(this))
},
search: function (cb) {
this.isSearching = true
setTimeout((function () {
cb()
this.isSearching = false
}).bind(this), 1000)
}
},
components: { 'slide-for-more': VueSlideForMore.SlideForMore }
})