- 18
- 0
如题,设置loop 初始化时候不生效
使用的是官网的demo组件
组件代码
<template>
<!-- 竖屏滑动组件 -->
<div class="slide" ref="slide">
<div class="slide-group" ref="slideGroup">
<slot>
</slot>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import BScroll from 'better-scroll'
const COMPONENT_NAME = 'slide'
export default {
name: COMPONENT_NAME,
props: {
dataInfo: {
type: Array,
},
loop: {
type: Boolean,
default: true
},
autoPlay: {
type: Boolean,
default: false
},
interval: {
type: Number,
default: 4000
},
click: {
type: Boolean,
default: true
},
},
data() {
return {
currentPageIndex: 0
}
},
watch: {
dataInfo () {
// 监听数据变化,重新计算scroll
setTimeout(() => {
this.refresh()
}, 60)
}
},
mounted() {
this.update()
window.addEventListener('resize', () => {
if (!this.slide || !this.slide.enabled) {
return
}
clearTimeout(this.resizeTimer)
this.resizeTimer = setTimeout(() => {
if (this.slide.isInTransition) {
this._onScrollEnd()
} else {
if (this.autoPlay) {
this._play()
}
}
this.refresh()
}, 60)
})
},
activated() {
if (!this.slide) {
return
}
this.slide.enable()
let pageIndex = this.slide.getCurrentPage().pageY
this.slide.goToPage(0, pageIndex, 0)
this.currentPageIndex = pageIndex
if (this.autoPlay) {
this._play()
}
},
deactivated() {
this.slide.disable()
clearTimeout(this.timer)
},
beforeDestroy() {
this.slide.disable()
clearTimeout(this.timer)
},
methods: {
update() {
if (this.slide) {
this.slide.destroy()
}
this.$nextTick(() => {
this.init()
})
},
refresh() {
this._setSlideHeight(true)
},
next() {
this.slide.next()
},
init() {
clearTimeout(this.timer)
this.currentPageIndex = 0
this._initSlide()
this._setSlideHeight()
if (this.autoPlay) {
this._play()
}
},
_setSlideHeight(isResize) {
this.children = this.$refs.slideGroup.children
let height = 0
let slideHeight = this.$refs.slide.clientHeight
for (let i = 0; i < this.children.length; i++) {
let child = this.children[i]
child.style.height = slideHeight + 'px'
height += slideHeight
}
if (this.loop && !isResize) {
height += 2 * slideHeight
}
this.$refs.slideGroup.style.height = height + 'px'
},
_initSlide() {
this.slide = new BScroll(this.$refs.slide, {
scrollX: false,
scrollY: true,
momentum: false,
stopPropagation: true,
snap: {
loop: false,
threshold: 0.1,
speed: 400,
easing: {
style: 'cubic-bezier(0.275, 0.885, 0.32, 1.275)'
}
},
bounce: false,
click: this.click,
})
this.slide.on('scrollEnd', this._onScrollEnd)
this.slide.on('touchEnd', () => {
if (this.autoPlay) {
this._play()
}
})
this.slide.on('beforeScrollStart', () => {
if (this.autoPlay) {
clearTimeout(this.timer)
}
})
},
_onScrollEnd() {
let pageIndex = this.slide.getCurrentPage().pageY
this.currentPageIndex = pageIndex
if (this.autoPlay) {
this._play()
}
},
_play() {
clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.slide.next()
}, this.interval)
}
}
}
</script>
<style lang="less" scoped>
.slide {
min-height: 1px;
height: 100vh;
overflow: hidden;
.slide-group {
position: relative;
}
}
</style>
使用组件
<slide :dataInfo="infoData.SectionList" ref="$Slide">
<template v-if="infoData.Cover_url">
<component :is="infoData.Invitation_Style_Code" :BasicInfo="BasicInfo"
:enrollCount="infoData.EnrollCount" v-on:linkto="linkto"
:backgroundUrl="infoData.Cover_url" :isCostom="infoData.Custom_App_Template"></component>
</template>
</slide>
另外初始化后在修改数据不刷新页面,会出一个克隆元素 但是数据没有克隆进去。
0
打赏
收藏
点击回答
网站公告
- 扫一扫访问手机版
回答动态

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

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

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

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

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

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

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

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

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

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