为什么这里的BScroll无法滚动

Question

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222

<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默认计算的是父元素的第一个子元素的高度来决定是否滚动。谢谢老师！