公告列表
公告列表
收藏
回答

scroll-view中使用弹性盒子无法使用scroll-into-view滚动

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug scroll-view 客户端 7.0.4 2.7.0

- 当前 Bug 的表现（可附上截图）


- 预期表现


- 复现路径


- 提供一个最简复现 Demo


scroll-view 组件内  当我使用弹性盒子布局时   scroll-into-view 滚动就失效  求大神解答

<template> <div class="detail"> <div class="banner_container"> <swiper :indicator-dots="false" :autoplay="true" @change="swiperChange"> <block v-for="(item,index) in imgList" :key="index"> <swiper-item> <image :src="item.image" class="slide-image" lazy-load="true"/> </swiper-item> </block> </swiper> <div class="num_content">{{swiperIndex}}/{{imgList.length}}</div> </div> <div class="house_info"> <h1 class="title">金石花菜</h1> <p class="time">丝黛芬&nbsp;录入于2018-12-22</p> <div class="marker"> <span>公</span> <span>有效</span> </div> <div class="price_content"> <div> <p>102万</p> <span>售价</span> </div> <div> <p>3室一厅两卫</p> <span>户型</span> </div> <div> <p>114m²</p> <span>面积</span> </div> </div> <p class="msg">钥匙信息：<span>无钥匙</span></p> </div> <div class="tab_container"> <block v-for="(item,index) in tabList" :key="index"> <div class="content" @click="switchTab(index)"> <p :class="active==index?'active_color':''">{{item}}</p> <span :class="active==index?'active_border':''"></span> </div> </block> </div> <scroll-view :scroll-into-view="toView" scroll-with-animation="true" scroll-y="true" style="height:500px;"> <div class="info_container" id="id0"> <div class="info_content">物业类型：{{info.propertyTyoe}}</div> <div class="info_content">户型：{{info.sized}}</div> <div class="info_content">区域所属：{{info.area}}</div> <div class="info_content">房屋装修：{{info.fitmentType}}</div> <div class="info_content">许可证：{{info.num}}</div> <div class="info_content">楼层：{{info.floor}}</div> <div class="info_content">占地面积：{{info.acreage}}元/平方</div> <div class="info_content">房屋类型：{{info.houseType}}</div> </div> <div class="info_container" id="id1"> <div class="info_content">物业类型：{{info.propertyTyoe}}</div> <div class="info_content">户型：{{info.sized}}</div> <div class="info_content">区域所属：{{info.area}}</div> <div class="info_content">房屋装修：{{info.fitmentType}}</div> <div class="info_content">许可证：{{info.num}}</div> <div class="info_content">楼层：{{info.floor}}</div> <div class="info_content">占地面积：{{info.acreage}}元/平方</div> <div class="info_content">房屋类型：{{info.houseType}}</div> </div> <div class="info_container" id="id2"> <div class="info_content">物业类型：{{info.propertyTyoe}}</div> <div class="info_content">户型：{{info.sized}}</div> <div class="info_content">区域所属：{{info.area}}</div> <div class="info_content">房屋装修：{{info.fitmentType}}</div> <div class="info_content">许可证：{{info.num}}</div> <div class="info_content">楼层：{{info.floor}}</div> <div class="info_content">占地面积：{{info.acreage}}元/平方</div> <div class="info_content">房屋类型：{{info.houseType}}</div> </div> </scroll-view> </div> </template> <script> export default { data() { return { active:0, swiperIndex:1, toView:"id2", tabList:['详情','跟进','带看'], imgList:[{ image:"/static/images/index/youzhi1.png" },{ image:"/static/images/index/youzhi1.png" },{ image:"/static/images/index/youzhi1.png" }], info:{ propertyTyoe:"公寓", sized:"3室2厅2卫", area:"西安", fitmentType:"豪华装修", num:"343249cdcwieomxxl", floor:"23", acreage:"19000", houseType:"住宅" }, }; }, methods:{ swiperChange(e){ this.swiperIndex = e.target.current+1; }, switchTab(i){ this.active = i; this.toView = "id"+i; console.log(this.toView,"toView") } } }; </script> <style lang="scss" scoped> .detail{ width: 100%; height: 100%; .banner_container{ width: 100%; position: relative; .num_content{ position: absolute; bottom: 30rpx; right: 30rpx; padding: 4rpx 20rpx; font-size: 28rpx; color: #fff; border-radius: 20rpx; background: rgba(0,0,0,0.3) } } .house_info{ padding: 30rpx; background: #fff; >.title{ padding-top: 30rpx; font-size: 30rpx; color: #000; } .time{ font-size: 22rpx; color: #929292; padding-top: 10rpx; } .marker{ padding-top: 10rpx; display: flex; align-items: center; margin-top: 10rpx; span{ margin-right: 10rpx; padding: 5rpx 10rpx; font-size: 26rpx; color: red; background: rgb(207, 151, 151); } } .price_content{ display: flex; align-items: center; justify-content: space-between; margin-top: 30rpx; padding: 30rpx 0; border-top: 1rpx solid #e5e5e5; >div{ flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; >p{ font-size: 32rpx; color: #f2681d } >span{ font-size: 24rpx; color: #929292; } } } .msg{ font-size: 24rpx; color: #929292; padding: 10rpx 0 40rpx 0; span{ color: #000; } } } .tab_container{ display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #e5e5e5; height: 90rpx; background: #fff; margin-top: 20rpx; >.content{ flex: 1; font-size: 30rpx; color:#000; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; span{ position: absolute; bottom: 0; left: 34%; height: 6rpx; width: 80rpx; } .active_border{ background: #f2681d; } .active_color{ color:#f2681d !important; } } } .info_container{ display: flex; flex-wrap: wrap; padding: 20rpx 0 30rpx 0; .info_content{ flex: 50%; height: 60rpx; line-height: 60rpx; font-size: 28rpx; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } } } </style>
最后一次编辑于  2019-05-29
回答关注问题邀请回答
收藏

1 个回答

请 登录 后发表内容
相关问题
相关文档