如下图所示,弹窗页面中使用scroll-view 做 垂直滑动,页面里头的灰色圆,(第一次初始化数据)被完全显示出来了,父view使用overflow: hidden无效,单当前item被选中后,红色半圆又显示正常。
<view class=‘circle-frame left’>
<view class=‘circle {{index==selectedIndex?“focus”:""}}’></view>
</view>
.circle-frame {
position: absolute;
top: 50%;
width: 20rpx;
height: 40rpx;
background-color: transparent;
box-sizing: border-box;
overflow: hidden;
/* overflow-x: hidden; */
z-index: 1001;
}
.circle {
position: absolute;
top: 0;
border-radius: 999rpx;
width: 40rpx;
height: 40rpx;
border: 2rpx solid #edf1f2;
background-color: #fff;
box-sizing: border-box;
z-index: 1001;
}
.circle-frame.right {
right: 0;
transform: translate(2rpx, -50%);
}
.circle-frame.right .circle {
right: 0;
transform: translateX(50%);
}
.circle.focus {
border: 2rpx solid #ee2929;
}