scroll:
<template>
<div ref="wrapper">
<slot></slot>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: 'scroll',
props: {
probeType: {
type: Number,
default: 1
},
click: {
type: Boolean,
default: true
},
data: {
type: Array,
default: null
}
},
mounted() {
setTimeout(() => {
this._initScroll()
}, 20)
},
methods: {
_initScroll() {
if (!this.$refs.wrapper) {
return
}
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: this.click
})
},
enable() {
this.scroll && this.scroll.enable()
},
disable() {
this.scroll && this.scroll.disable()
},
refresh() {
this.scroll && this.scroll.refresh()
}
},
watch: {
data() {
setTimeout(() => {
this.refresh()
}, 20)
}
}
}
</script>
<style scoped>
</style>
当引用它的组件 data是 异步获取定要重新刷新
引用:
<template>
<div class="recommend">
<scroll ref="scroll" class="recommend-content" :data="discList">
<div>
/*******************************/
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENTCONTENT CONTENT
/*******************************/
</div>
</scroll>
</div>
</template>
<script>
import {getRecommend, getDiscList} from 'api/recommend'
import scroll from 'base/scroll/scroll'
import Slider from 'base/slider/slider'
import {ERR_OK} from 'api/config'
import loading from 'base/loading/loading'
export default {
name: 'recommend',
data() {
return {
recommends: [],
discList:[]
}
},
components: {
Slider,
scroll,
loading
},
created() {
this._getRecommend()
setTimeout(()=>{
this._getDiscList()
},1000)
},
methods: {
async _getRecommend() {
const res = await getRecommend()
if (res.code === ERR_OK) {
this.recommends = res.data.slider
console.log(this.recommends.length)
}
},
async _getDiscList() {
const res = await getDiscList()
if(res.code === ERR_OK){
this.discList = res.data.list
// console.log(this.discList)
}
}
}
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
.recommend
position: fixed
width: 100%
top: 88px
bottom: 0
.recommend-content
height: 100%
overflow: hidden
.slider-wrapper
position: relative
width: 100%
overflow: hidden
.recommend-list
.list-title
height: 65px
line-height: 65px
text-align: center
font-size: $font-size-medium
color: $color-theme
.item
display: flex
box-sizing: border-box
align-items: center
padding: 0 20px 20px 20px
.icon
flex: 0 0 60px
width: 60px
padding-right: 20px
.text
display: flex
flex-direction: column
justify-content: center
flex: 1
line-height: 20px
overflow: hidden
font-size: $font-size-medium
.name
margin-bottom: 10px
color: $color-text
.desc
color: $color-text-d
.loading-container
position: absolute
width: 100%
top: 50%
transform: translateY(-50%)
</style>
其实比较重要的是
div.wapper >scroll>div>{滚动content}
div.wrapper{
position: fixed
width: 100%
top: 88px
bottom: 0
}