我在写h5页面的时候,遇到了几次滚动不能用的问题,(正常页面上没有,但是弹窗中就是滑动不了),还是记一下吧
上问题代码
<Drawer
ref="showRight"
mode="left"
:mask-click="true"
:width="clientWidth"
:height="320"
>
<view class="flex-col items-center content">
<view
v-for="(item, index) in dataList"
:key="item.id"
@click="
() => {
clickobj = item;
}
"
class="flex-row justify-center items-center listItem"
:class="clickobj.id == item.id ? 'activity' : ''"
>
{{ item.name }}</view
>
</view>
<view class="submit" @click="emitBack"> 确定 </view>
</Drawer>
<Drawer>是我封装的弹窗
其中的样式也是看起来没什么问题,当然,高是要固定好的,我这里用的max-height
.content {
padding: 34px 0px 35px;
max-height: 195px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.listItem {
width: 100%;
height: 40px;
}
.activity {
color: $uni-color-primary;
}
.submit {
width: 100%;
height: 55px;
line-height: 55px;
text-align: center;
color: $uni-text-color-inverse;
background-color: $uni-color-primary;
}
可就是不能滑动
解决办法:
将需要滑动的 <view> 直接变成 <scroll-view>就好,并加上属性 scroll-y="true" ,并且没有改样式,就解决了
<Drawer
ref="showRight"
mode="left"
:mask-click="true"
:width="clientWidth"
:height="320"
>
<scroll-view scroll-y="true" class="flex-col items-center content">
<view
v-for="(item, index) in dataList"
:key="item.id"
@click="
() => {
clickobj = item;
}
"
class="flex-row justify-center items-center listItem"
:class="clickobj.id == item.id ? 'activity' : ''"
>
{{ item.name }}</view
>
</scroll-view>
<view class="submit" @click="emitBack"> 确定 </view>
</Drawer>