【报Bug】scroll-view不起作用 无法滚动

示例代码：

<template>
<div class="back">
<van-nav-bar fixed placeholder>
<div slot="title" class="row">
<div :class="{ screen:check==='1' }" @click="check='1'">商品</div>
<div :class="{ screen:check==='2' }" @click="check='2'" class="m-l-20">详情</div>
</div>
</van-nav-bar>
<template v-if="check==='1'">
<van-swipe @change="onChange" class="swipe" loop :autoplay="3000">
<van-swipe-item v-for="(item,index) in pageData.image_list" :key="index">
<img :src="item" class="images"/>
</van-swipe-item>
<template slot="indicator">
<div class="custom-indicator">
{{ current + 1 }}/{{ pageData.image_list.length }}
</div>
</template>
</van-swipe>
<div class="pad15">
<div class="row-space">
<div class="row">
<span class="symbol">￥</span>
<span class="borld">{{pageData.price}}</span>
<span class="tagboard">
<span class="circle"></span>
<span class="circle2"></span>
送<span class="ampli">{{pageData.gold_bean}}</span>金券
</span>
</div>
<div class="size">销量{{pageData.sale_num}}</div>
</div>
<div class="m-t-5 cut-out">
<span class="recom" v-if="pageData.is_recommend==1">精品推荐</span>
<span class="borld">{{pageData.title}}</span>
<span>{{pageData.describe}}</span>
</div>
</div>
<div class="m-t-10 back-img">
<img src="@/assets/images/relieved.png" class="relieved">
<div class="wire">|</div>
<div class="safeguard" v-for="(item,index) in pageData.service" :key="index">
{{item.title}}<span v-if="index<pageData.service.length-1" style="margin:0 5px;">·</span>
</div>
</div>
<div class="p-5">
<div class="line-row">
<div class="line-title">
发货
</div>
<span class="address"><img src="~@/assets/icon/weizhi.png" class="icon-weizhi"/>{{pageData.ship_address}}</span>
</div>
<div class="line">
<div class="line-title">
规格 <span class="details">请选择规格</span>
</div>
<img src="~@/assets/icon/right.png" class="arrows"/>
</div>
<div class="line-row">
<div class="line-title">
快递
</div>
<span class="address">{{pageData.is_postage==1?'包邮':'不包邮'}}</span>
</div>
</div>
<div class="p-5">
<div class="evaluate">
商品评价
</div>
<template v-if="pageData.newComment.length>0">
<div v-for="(items,index) in pageData.newComment" :key="index">
<div class="row">
<img :src="items.head_img_url" class="profile"/>
<span class="nickname">{{items.nick_name}}</span>
</div>
<div class="comment">{{items.content}}</div>
<div class="specification">
规格：{{items.spec}}
</div>
<div class="borders" v-if="pageData.handpickImg.length>0">
<div class="evaluate">精选晒图</div>
<div class="row flex">
<img v-for="(itemimg,indexs) in pageData.handpickImg" :key="indexs" :src="itemimg" class="print">
</div>
</div>
</div>
</template>
<template v-else>
<div class="available">暂无评价</div>
</template>
</div>
<div class="m-t-10">
<img src="https://platform-image.oss-cn-beijing.aliyuncs.com/moren/%E5%BA%97%E9%93%BA%E5%85%AC%E5%91%8A.png" style="width:100%;">
</div>
<div class="m-t-10">
<div class="new-title">
宝贝详情
</div>
<div v-html="pageData.content"></div>
</div>
</template>
<template v-else>
<div v-html="pageData.content"></div>
</template>
<van-popup v-model="show" position="bottom">
<div></div>
<img src="~@/assets/icon/close.png" class="position"/>
<div class="show-row">
</div>
</van-popup>
</div>
</template>
<script>
export default {
name:'commodity',
data(){
return{
current: 0,
check:'1',
pageData:{
image_list:[],
newComment:[],
handpickImg:[]
},
show:true
}
},
methods:{
onChange(index) {
this.current = index;
},
//获取商品详情
getDetail(){
this.$request({
url:'goods/goodsDetail',
method:'post',
data:{
id:'15361'
}
})
.then(res=>{
this.pageData = res.data;
console.log(res,'这个的值的内容市设呢么呢')
})
}
},
mounted(){
this.getDetail();
}
}
</script>
<style scoped>
.show-row{
display: flex;
align-items: flex-end;
}
.screen{
color: #FFBD00;
}
.back{
background-color: #E8E8E8;
}
.custom-indicator {
position: absolute;
right: 5px;
bottom: 5px;
padding: 2px 5px;
font-size: 12px;
background: rgba(0, 0, 0, 0.1);
}
.swipe{
height: 350px;
}
.pad15{
padding: 10px;
background-color: #ffffff;
}
.symbol{
font-size: 8px;
}
.borld{
font-weight: bold;
}
.tagboard{
padding: 4px 10px;
background-color: #B4935E;
font-size: 10px;
color: #ffffff;
border-radius: 2px;
margin-left: 10px;
position: relative;
}
.ampli{
font-size: 16px;
font-weight: bolder;
}
.circle{
display: inline-block;
width: 12px;
height: 12px;
background-color: #ffffff;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
left: -8px;
margin: auto;
}
.circle2{
display: inline-block;
width: 12px;
height: 12px;
background-color: #ffffff;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
right: -8px;
margin: auto;
}
.size{
font-size: 12px;
color: #999999;
}
.cut-out{
font-size: 14px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.recom{
border: 1px solid #EB5D2A;
color: #EB5D2A;
font-size: 8px;
padding: 2px 4px;
}
.back-img{
background-image: url('~@/assets/images/back.png');
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.relieved{
width: 60px;
height: 12px;
}
.wire{
color: #A98245;
font-size: 12px;
margin: 0 5px;
}
.safeguard{
font-size: 12px;
color: #A98245;
}
.p-5{
padding: 0 10px;
margin-top: 10px;
background-color: #ffffff;
font-size: 12px;
}
.line{
padding: 10px 0;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 0.5px solid #F2F2F2;
}
.line-row{
padding: 10px 0;
display: flex;
align-items: center;
border-bottom: 0.5px solid #F2F2F2;
}
.line-title{
font-weight: 800;
}
.icon-weizhi{
width: 20px;
}
.address{
display: flex;
align-items: center;
margin-left: 10px;
}
.details{
font-weight: 400;
margin-left: 10px;
}
.arrows{
width: 15px;
height: 15px;
}
.line-row:last-child{
border: 0;
}
.m-t-10{
margin-top: 10px;
background-color: #ffffff;
font-size: 12px;
text-align: center;
}
.new-title{
padding: 10px;
}
.evaluate{
font-size: 12px;
padding: 10px 0;
}
.images{
width: 100%;
height: 100%;
}
.profile{
width: 30px;
height: 30px;
border-radius: 50%;
}
.nickname{
font-size: 10px;
color: #999999;
margin-left: 5px;
}
.comment{
font-size: 13px;
margin-top: 5px;
}
.specification{
margin-top: 4px;
font-size: 8px;
color: #999999;
}
.borders{
margin-top: 10px;
padding-bottom: 5px;
border-top: 1px solid #F2F2F2;
}
.print{
width: 110px;
height: 110px;
}
.flex{
flex-wrap: wrap;
}
.available{
font-size: 10px;
padding: 10px 0;
color: #999999;
}
.position{
position: absolute;
right: 10px;
top: 10px;
}
</style>

操作步骤：

<template>
<div class="back">
<van-nav-bar fixed placeholder>
<div slot="title" class="row">
<div :class="{ screen:check==='1' }" @click="check='1'">商品</div>
<div :class="{ screen:check==='2' }" @click="check='2'" class="m-l-20">详情</div>
</div>
</van-nav-bar>
<template v-if="check==='1'">
<van-swipe @change="onChange" class="swipe" loop :autoplay="3000">
<van-swipe-item v-for="(item,index) in pageData.image_list" :key="index">
<img :src="item" class="images"/>
</van-swipe-item>
<template slot="indicator">
<div class="custom-indicator">
{{ current + 1 }}/{{ pageData.image_list.length }}
</div>
</template>
</van-swipe>
<div class="pad15">
<div class="row-space">
<div class="row">
<span class="symbol">￥</span>
<span class="borld">{{pageData.price}}</span>
<span class="tagboard">
<span class="circle"></span>
<span class="circle2"></span>
送<span class="ampli">{{pageData.gold_bean}}</span>金券
</span>
</div>
<div class="size">销量{{pageData.sale_num}}</div>
</div>
<div class="m-t-5 cut-out">
<span class="recom" v-if="pageData.is_recommend==1">精品推荐</span>
<span class="borld">{{pageData.title}}</span>
<span>{{pageData.describe}}</span>
</div>
</div>
<div class="m-t-10 back-img">
<img src="@/assets/images/relieved.png" class="relieved">
<div class="wire">|</div>
<div class="safeguard" v-for="(item,index) in pageData.service" :key="index">
{{item.title}}<span v-if="index<pageData.service.length-1" style="margin:0 5px;">·</span>
</div>
</div>
<div class="p-5">
<div class="line-row">
<div class="line-title">
发货
</div>
<span class="address"><img src="~@/assets/icon/weizhi.png" class="icon-weizhi"/>{{pageData.ship_address}}</span>
</div>
<div class="line">
<div class="line-title">
规格 <span class="details">请选择规格</span>
</div>
<img src="~@/assets/icon/right.png" class="arrows"/>
</div>
<div class="line-row">
<div class="line-title">
快递
</div>
<span class="address">{{pageData.is_postage==1?'包邮':'不包邮'}}</span>
</div>
</div>
<div class="p-5">
<div class="evaluate">
商品评价
</div>
<template v-if="pageData.newComment.length>0">
<div v-for="(items,index) in pageData.newComment" :key="index">
<div class="row">
<img :src="items.head_img_url" class="profile"/>
<span class="nickname">{{items.nick_name}}</span>
</div>
<div class="comment">{{items.content}}</div>
<div class="specification">
规格：{{items.spec}}
</div>
<div class="borders" v-if="pageData.handpickImg.length>0">
<div class="evaluate">精选晒图</div>
<div class="row flex">
<img v-for="(itemimg,indexs) in pageData.handpickImg" :key="indexs" :src="itemimg" class="print">
</div>
</div>
</div>
</template>
<template v-else>
<div class="available">暂无评价</div>
</template>
</div>
<div class="m-t-10">
<img src="https://platform-image.oss-cn-beijing.aliyuncs.com/moren/%E5%BA%97%E9%93%BA%E5%85%AC%E5%91%8A.png" style="width:100%;">
</div>
<div class="m-t-10">
<div class="new-title">
宝贝详情
</div>
<div v-html="pageData.content"></div>
</div>
</template>
<template v-else>
<div v-html="pageData.content"></div>
</template>
<van-popup v-model="show" position="bottom">
<div></div>
<img src="~@/assets/icon/close.png" class="position"/>
<div class="show-row">
</div>
</van-popup>
</div>
</template>
<script>
export default {
name:'commodity',
data(){
return{
current: 0,
check:'1',
pageData:{
image_list:[],
newComment:[],
handpickImg:[]
},
show:true
}
},
methods:{
onChange(index) {
this.current = index;
},
//获取商品详情
getDetail(){
this.$request({
url:'goods/goodsDetail',
method:'post',
data:{
id:'15361'
}
})
.then(res=>{
this.pageData = res.data;
console.log(res,'这个的值的内容市设呢么呢')
})
}
},
mounted(){
this.getDetail();
}
}
</script>
<style scoped>
.show-row{
display: flex;
align-items: flex-end;
}
.screen{
color: #FFBD00;
}
.back{
background-color: #E8E8E8;
}
.custom-indicator {
position: absolute;
right: 5px;
bottom: 5px;
padding: 2px 5px;
font-size: 12px;
background: rgba(0, 0, 0, 0.1);
}
.swipe{
height: 350px;
}
.pad15{
padding: 10px;
background-color: #ffffff;
}
.symbol{
font-size: 8px;
}
.borld{
font-weight: bold;
}
.tagboard{
padding: 4px 10px;
background-color: #B4935E;
font-size: 10px;
color: #ffffff;
border-radius: 2px;
margin-left: 10px;
position: relative;
}
.ampli{
font-size: 16px;
font-weight: bolder;
}
.circle{
display: inline-block;
width: 12px;
height: 12px;
background-color: #ffffff;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
left: -8px;
margin: auto;
}
.circle2{
display: inline-block;
width: 12px;
height: 12px;
background-color: #ffffff;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
right: -8px;
margin: auto;
}
.size{
font-size: 12px;
color: #999999;
}
.cut-out{
font-size: 14px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.recom{
border: 1px solid #EB5D2A;
color: #EB5D2A;
font-size: 8px;
padding: 2px 4px;
}
.back-img{
background-image: url('~@/assets/images/back.png');
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.relieved{
width: 60px;
height: 12px;
}
.wire{
color: #A98245;
font-size: 12px;
margin: 0 5px;
}
.safeguard{
font-size: 12px;
color: #A98245;
}
.p-5{
padding: 0 10px;
margin-top: 10px;
background-color: #ffffff;
font-size: 12px;
}
.line{
padding: 10px 0;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 0.5px solid #F2F2F2;
}
.line-row{
padding: 10px 0;
display: flex;
align-items: center;
border-bottom: 0.5px solid #F2F2F2;
}
.line-title{
font-weight: 800;
}
.icon-weizhi{
width: 20px;
}
.address{
display: flex;
align-items: center;
margin-left: 10px;
}
.details{
font-weight: 400;
margin-left: 10px;
}
.arrows{
width: 15px;
height: 15px;
}
.line-row:last-child{
border: 0;
}
.m-t-10{
margin-top: 10px;
background-color: #ffffff;
font-size: 12px;
text-align: center;
}
.new-title{
padding: 10px;
}
.evaluate{
font-size: 12px;
padding: 10px 0;
}
.images{
width: 100%;
height: 100%;
}
.profile{
width: 30px;
height: 30px;
border-radius: 50%;
}
.nickname{
font-size: 10px;
color: #999999;
margin-left: 5px;
}
.comment{
font-size: 13px;
margin-top: 5px;
}
.specification{
margin-top: 4px;
font-size: 8px;
color: #999999;
}
.borders{
margin-top: 10px;
padding-bottom: 5px;
border-top: 1px solid #F2F2F2;
}
.print{
width: 110px;
height: 110px;
}
.flex{
flex-wrap: wrap;
}
.available{
font-size: 10px;
padding: 10px 0;
color: #999999;
}
.position{
position: absolute;
right: 10px;
top: 10px;
}
</style>

预期结果：

<template>
<div class="back">
<van-nav-bar fixed placeholder>
<div slot="title" class="row">
<div :class="{ screen:check==='1' }" @click="check='1'">商品</div>
<div :class="{ screen:check==='2' }" @click="check='2'" class="m-l-20">详情</div>
</div>
</van-nav-bar>
<template v-if="check==='1'">
<van-swipe @change="onChange" class="swipe" loop :autoplay="3000">
<van-swipe-item v-for="(item,index) in pageData.image_list" :key="index">
<img :src="item" class="images"/>
</van-swipe-item>
<template slot="indicator">
<div class="custom-indicator">
{{ current + 1 }}/{{ pageData.image_list.length }}
</div>
</template>
</van-swipe>
<div class="pad15">
<div class="row-space">
<div class="row">
<span class="symbol">￥</span>
<span class="borld">{{pageData.price}}</span>
<span class="tagboard">
<span class="circle"></span>
<span class="circle2"></span>
送<span class="ampli">{{pageData.gold_bean}}</span>金券
</span>
</div>
<div class="size">销量{{pageData.sale_num}}</div>
</div>
<div class="m-t-5 cut-out">
<span class="recom" v-if="pageData.is_recommend==1">精品推荐</span>
<span class="borld">{{pageData.title}}</span>
<span>{{pageData.describe}}</span>
</div>
</div>
<div class="m-t-10 back-img">
<img src="@/assets/images/relieved.png" class="relieved">
<div class="wire">|</div>
<div class="safeguard" v-for="(item,index) in pageData.service" :key="index">
{{item.title}}<span v-if="index<pageData.service.length-1" style="margin:0 5px;">·</span>
</div>
</div>
<div class="p-5">
<div class="line-row">
<div class="line-title">
发货
</div>
<span class="address"><img src="~@/assets/icon/weizhi.png" class="icon-weizhi"/>{{pageData.ship_address}}</span>
</div>
<div class="line">
<div class="line-title">
规格 <span class="details">请选择规格</span>
</div>
<img src="~@/assets/icon/right.png" class="arrows"/>
</div>
<div class="line-row">
<div class="line-title">
快递
</div>
<span class="address">{{pageData.is_postage==1?'包邮':'不包邮'}}</span>
</div>
</div>
<div class="p-5">
<div class="evaluate">
商品评价
</div>
<template v-if="pageData.newComment.length>0">
<div v-for="(items,index) in pageData.newComment" :key="index">
<div class="row">
<img :src="items.head_img_url" class="profile"/>
<span class="nickname">{{items.nick_name}}</span>
</div>
<div class="comment">{{items.content}}</div>
<div class="specification">
规格：{{items.spec}}
</div>
<div class="borders" v-if="pageData.handpickImg.length>0">
<div class="evaluate">精选晒图</div>
<div class="row flex">
<img v-for="(itemimg,indexs) in pageData.handpickImg" :key="indexs" :src="itemimg" class="print">
</div>
</div>
</div>
</template>
<template v-else>
<div class="available">暂无评价</div>
</template>
</div>
<div class="m-t-10">
<img src="https://platform-image.oss-cn-beijing.aliyuncs.com/moren/%E5%BA%97%E9%93%BA%E5%85%AC%E5%91%8A.png" style="width:100%;">
</div>
<div class="m-t-10">
<div class="new-title">
宝贝详情
</div>
<div v-html="pageData.content"></div>
</div>
</template>
<template v-else>
<div v-html="pageData.content"></div>
</template>
<van-popup v-model="show" position="bottom">
<div></div>
<img src="~@/assets/icon/close.png" class="position"/>
<div class="show-row">
</div>
</van-popup>
</div>
</template>
<script>
export default {
name:'commodity',
data(){
return{
current: 0,
check:'1',
pageData:{
image_list:[],
newComment:[],
handpickImg:[]
},
show:true
}
},
methods:{
onChange(index) {
this.current = index;
},
//获取商品详情
getDetail(){
this.$request({
url:'goods/goodsDetail',
method:'post',
data:{
id:'15361'
}
})
.then(res=>{
this.pageData = res.data;
console.log(res,'这个的值的内容市设呢么呢')
})
}
},
mounted(){
this.getDetail();
}
}
</script>
<style scoped>
.show-row{
display: flex;
align-items: flex-end;
}
.screen{
color: #FFBD00;
}
.back{
background-color: #E8E8E8;
}
.custom-indicator {
position: absolute;
right: 5px;
bottom: 5px;
padding: 2px 5px;
font-size: 12px;
background: rgba(0, 0, 0, 0.1);
}
.swipe{
height: 350px;
}
.pad15{
padding: 10px;
background-color: #ffffff;
}
.symbol{
font-size: 8px;
}
.borld{
font-weight: bold;
}
.tagboard{
padding: 4px 10px;
background-color: #B4935E;
font-size: 10px;
color: #ffffff;
border-radius: 2px;
margin-left: 10px;
position: relative;
}
.ampli{
font-size: 16px;
font-weight: bolder;
}
.circle{
display: inline-block;
width: 12px;
height: 12px;
background-color: #ffffff;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
left: -8px;
margin: auto;
}
.circle2{
display: inline-block;
width: 12px;
height: 12px;
background-color: #ffffff;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
right: -8px;
margin: auto;
}
.size{
font-size: 12px;
color: #999999;
}
.cut-out{
font-size: 14px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.recom{
border: 1px solid #EB5D2A;
color: #EB5D2A;
font-size: 8px;
padding: 2px 4px;
}
.back-img{
background-image: url('~@/assets/images/back.png');
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.relieved{
width: 60px;
height: 12px;
}
.wire{
color: #A98245;
font-size: 12px;
margin: 0 5px;
}
.safeguard{
font-size: 12px;
color: #A98245;
}
.p-5{
padding: 0 10px;
margin-top: 10px;
background-color: #ffffff;
font-size: 12px;
}
.line{
padding: 10px 0;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 0.5px solid #F2F2F2;
}
.line-row{
padding: 10px 0;
display: flex;
align-items: center;
border-bottom: 0.5px solid #F2F2F2;
}
.line-title{
font-weight: 800;
}
.icon-weizhi{
width: 20px;
}
.address{
display: flex;
align-items: center;
margin-left: 10px;
}
.details{
font-weight: 400;
margin-left: 10px;
}
.arrows{
width: 15px;
height: 15px;
}
.line-row:last-child{
border: 0;
}
.m-t-10{
margin-top: 10px;
background-color: #ffffff;
font-size: 12px;
text-align: center;
}
.new-title{
padding: 10px;
}
.evaluate{
font-size: 12px;
padding: 10px 0;
}
.images{
width: 100%;
height: 100%;
}
.profile{
width: 30px;
height: 30px;
border-radius: 50%;
}
.nickname{
font-size: 10px;
color: #999999;
margin-left: 5px;
}
.comment{
font-size: 13px;
margin-top: 5px;
}
.specification{
margin-top: 4px;
font-size: 8px;
color: #999999;
}
.borders{
margin-top: 10px;
padding-bottom: 5px;
border-top: 1px solid #F2F2F2;
}
.print{
width: 110px;
height: 110px;
}
.flex{
flex-wrap: wrap;
}
.available{
font-size: 10px;
padding: 10px 0;
color: #999999;
}
.position{
position: absolute;
right: 10px;
top: 10px;
}
</style>

实际结果：

很大的几率会卡死