为什么这里的BScroll无法滚动

Question

老师，前面的代码都可以滚动，但到了评论页面就滚动不了，DOM元素可以获取得到，$nextTick也加了还是不行。在mounted里面再执行也不行。不知道是哪里出问题了，麻烦老师帮忙看下，谢谢！

<template>
<div>
<div class="ratings" ref="rat">
<div class="overview">
<div class="overview-left">
<div class="score">
{{seller.score}}
</div>
<div class="title">综合评分</div>
<div class="rank">高于周边商家{{seller.rankRate}}%</div>
</div>
<div class="overview-right">
<div class="score-wrapper">
<span class="title">服务态度</span>
<star :score="seller.serviceScore" :size="36"></star>
<span class="score">{{seller.serviceScore}}</span>
</div>
<div class="score-wrapper">
<span class="title">商品评分</span>
<star :score="seller.foodScore" :size="36"></star>
<span class="score">{{seller.foodScore}}</span>
</div>
<div class="delivery-wrapper">
<span class="title">送达时间</span>
<span class="delivery">{{seller.deliveryTime}}分钟</span>
</div>
</div>
</div>
<split></split>
<ratingselect :ratings="ratings" :selectType="selectType" :onlyContent="onlyContent"  @toggleContent="changeContent" @selectType="selectT"></ratingselect>
<div class="rating-wrapper">
<ul>
<li v-for="(rating,index) in ratings" class="rating-item" :key="index">
<div class="avatar">
<img width="28" height="28" :src="rating.avatar">
</div>
<div class="content">
<h1 class="name">{{rating.username}}</h1>
<div class="star-wrapper">
<star :size="24" :score="rating.score"></star>
<span class="delivery" v-show="rating.deliveryTime">{{rating.deliveryTime}}</span>
</div>
<p class="text">{{rating.text}}</p>
<div class="recommand" v-show="rating.recommand && rating.recommand.length">
<span class="icon-thumb_up"></span>
<div v-for="(item,index) in rating.recommand" :key="index">
{{item}}
</div>
</div>
<div class="item">{{rating.rateTime | formateDate}}</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>

<script>
import star from '../star/star'
import split from '../split/split'
import ratingselect from '../ratingselect/ratingselect'
import {dateFormate} from '../../common/js/date.js'
import BScroll from 'better-scroll'
const ALL=0;
const Ero_OK=0;
export default {
name:'ratings',
components:{
star,
split,
ratingselect
},
props:{
seller:{
type:Object
}
},
created(){
    this.$http.get('/api/ratings').then((res)=>{
        let result=res.data;
        if(result.errno===Ero_OK){
            this.ratings=result.data;
            this.$nextTick(()=>{
                this.scroll=new BScroll(this.$refs.rat,{
                    click:true
                })
            })
        }
    })
},

data(){
    return {
        selectType:ALL,
        onlyContent:true,
        ratings:[]
    }
},
methods:{
    selectT(selectType){
        this.selectType=selectType;
    },
    changeContent(){
        this.onlyContent = !this.onlyContent
    }
},
filters:{
    formateDate(time){
        let date = new Date(time);
        time = dateFormate(date,'yyyy-MM-dd hh:mm');
        return time
    }
}
}
</script>


<style lang="stylus" scoped>
@import '../../common/stylus/mixin'
.ratings
position absolute
left 0
top 174px
bottom 0
width 100%
overflow hidden
.overview
display flex
padding 18px 0
.overview-left
flex 0 0 137px
width 137px
border-right 1px solid rgba(7,17,27,0.1)
text-align center
padding 6px 0
@media only screen and (max-width:320px)
flex 0 0 120px
width 120px
.score
font-size 24px
color rgb(255,153,0)
line-height 28px
font-weight 700
.title
font-size 12px
color rgb(7,17,27)
line-height 12px
margin 6px 0 8px 0
.rank
font-size 10px
color rgb(147,153,159)
line-height 10px
.overview-right
flex 1
padding 6px 0 6px 24px
@media only screen and (max-width:320px)
padding-left 6px
.score-wrapper
font-size 0
margin-bottom 8px
.title
display inline-block
vertical-align top
font-size 12px
color rgb(7,17,27)
line-height 18px                
.star
display inline-block
vertical-align top
margin 0 12px
.score
display inline-block
vertical-align top
font-size 12px
color rgb(255,153,0)
line-height 18px 
.delivery-wrapper
font-size 0
line-height 18px
.title
font-size 12px
color rgb(7,17,27)
.delivery
font-size 12px
color rgb(147,153,159)
margin-left 12px
.rating-wrapper
padding 0 18px
.rating-item
display flex
padding 18px 0
border-1px(rgba(7,17,27,0.1))
.avatar
flex 0 0 28px
width 28px
margin-right 12px
img 
border-radius 50%
.content
flex 1
position relative
.name
font-size 10px
color rgb(7,17,27)
line-height 12px
margin-bottom 4px
.star-wrapper
font-size 0px
margin-bottom 6px
.star
display inline-block
vertical-align top
margin-right 6px
.delivery
display inline-block
vertical-align top
font-size 10px
color rgb(147,153,159)
line-height 12px

</style>

Answer 1

ustbhuangyi 2018-01-15 22:34:40

1.确保你满足可以滚动的条件，父元素高度固定，子元素高度随内容撑开且高度大于父元素；
2. 使用最新版本的 better-scroll

• 提问者 karasu丶 #1

  找到原因了，原来是要用一个div来包裹所有的子元素才行，估计BScroll默认计算的是父元素的第一个子元素的高度来决定是否滚动。谢谢老师！