- 45
- 0
<template>
<div ref='wrapper'>
<div class="bScroll-container">
<div class="bScroll-top" v-show="show" :style="msgCol">
<span>{{showMsg}}</span>
</div>
<div class="bScroll-content">
<slot></slot>
</div>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
data () {
return {
showMsg: '下拉刷新...',
show: false,
}
},
props: {
probeType: {
type: Number,
default: 1
},
click: {
type: Boolean,
default: true
},
listenScroll: {
type: Boolean,
default: true
},
data: {
type: Array | Object,
default: null
},
pullup: {
type: Boolean,
default: true
},
pulldown: {
type: Boolean,
default: true
},
beforeScroll: {
type: Boolean,
default: false
},
refreshDelay: {
type: Number,
default: 20
},
pullUpLoad: {
type: Boolean,
default: true
},
msg: {
type: String,
default: ''
},
pullDownRefresh: {
type: Boolean | Object,
default: true
}
},
mounted () {
setTimeout(() => {
this._initScroll()
}, 20)
},
computed: {
msgCol () {
switch (this.msg) {
case 'black':
return `color: #2f2725`
default:
return `color: #fff`
}
}
},
methods: {
_initScroll () {
if (!this.$refs.wrapper) {
return
}
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: this.click,
pullDownRefresh: {
threshold: 50,
stop: 20
},
pullUpLoad: {
threshold: -50
}
})
if (this.listenScroll) {
let me = this
this.scroll.on('scroll', pos => {
if (pos.y > 50) {
this.show = true
this.showMsg = '加载中...'
}
})
}
if (this.pullup) { // 上拉加载
this.scroll.on('pullingUp', () => {
console.log(111)
this.$emit('nextPage')
this.scroll.finishPullUp()
this.scroll.refresh()
})
}
if (this.pulldown) { // 下拉刷新
this.scroll.on('pullingDown', (pos) => {
this.$emit('pulldown')
})
}
if (this.beforeScroll) {
this.scroll.on('beforeScrollStart', () => {
this.$emit('beforeScroll')
})
}
},
disable () {
this.scroll && this.scroll.disable()
},
enable () {
this.scroll && this.scroll.enable()
},
refresh () {
this.scroll && this.scroll.refresh()
},
scrollTo () {
this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
},
scrollToElement () {
this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
}
},
watch: {
data () {
setTimeout(() => {
this.refresh()
}, this.refreshDelay)
}
}
}
</script>
<style lang="less" scoped>
.bScroll-top{
text-align: center;
color: #ffffff;
line-height: 3rem;
}
</style>
- 已经在pulldown后面加了this.scroll.finishPullUp(), this.scroll.refresh(),但是还是不能解决上拉加载就能加载一次的问题...
- 请问各位,我这是哪里写错了吗~?或者写漏了
1
打赏
收藏
点击回答
您的回答被采纳后将获得:提问者悬赏的 11 元积分
- 共 0 条
- 全部回答
-
草生 普通会员 1楼
在Vue中,你可以通过设置
@popperOptions属性来控制Pulldown的触发频率。以下是一个简单的示例:```javascript
Pulldown Content
```
在这个示例中,我们为
<p>元素添加了一个@popper-open指令,这将触发一个openPulldown方法。然后,我们在<p>元素内部的@popper-open指令中设置了pulldownContent的值。这样,每次用户点击“展开”按钮时,
openPulldown方法都会被调用,并更新pulldownContent的值。如果用户点击“关闭”按钮,openPulldown方法将不会被调用。注意,这只是一个基本的示例。你可能需要根据你的具体需求来调整
@popperOptions属性的值。
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

