收藏
回答

swiper-item中嵌套一个scroll-view后真机为什么出现两个滚动条?

<view>
  <!-- 页眉部分,包含Logo和标题 -->
  <view class="header">
    <view>
      <image src="{{userInfo.avatarUrl}}" class="header-user-avatar" />
    </view>
    <view class="header-content">
      <p style="font-size: 1rem">
        Hi,{{userInfo.nickName ? userInfo.nickName :'微信用户'}}
      </p>
      <view>
        <t-tag class="header-tag" style="background-color: #d6f6f1; margin-right: 0.9rem">标准</t-tag>
        <t-tag class="header-tag" style="background-color: #d4f5d2">剩余30天到期</t-tag>
      </view>
    </view>
  </view>
  <!-- Tab布局 -->
  <view class="navBox">
    <view class="titleBox" wx:for="{{tabList}}" bindtap="tabsOn" data-idx="{{item.index}}">
      <text class="{{item.index == tabsId ? 'fontColorBox' : ''}}">{{item.title}}</text>
    </view>
  </view>
  <!-- 内容布局 -->
  <swiper class="swiperTtemBox" bindchange="slideOn" current="{{tabsId}}" circular>
    <!-- 场次 -->
    <swiper-item skip-hidden-item-layout="{{true}}">
      <scroll-view wx:if="{{showSwiper === '' }}" class="scroll-view-container" scroll-y="true">
        <t-grid style="margin: 1rem; border-radius: 30rpx" column="{{2}}">
          <t-grid-item text="时间" icon="time" />
          <t-grid-item text="球场" image="slot">
            <view slot="image" class="grid-item__image">
              <view style="display: flex">
                <image src="../../assets/Basketball.svg" mode="" style="width: 2.2rem; height: 2.2rem" />
              </view>
            </view>
          </t-grid-item>
        </t-grid>
        <view style="margin: 1rem">
          <block wx:for="{{venueCell}}" wx:key="venueId">
            <t-swipe-cell right="{{right}}" catch:click="onActionClick">
              <view class="cell-container">
                <view class="cell-item">
                  <p>{{item.time}}</p>
                </view>
                <view class="cell-item">
                  <p>{{item.court}}</p>
                </view>
              </view>
            </t-swipe-cell>
          </block>
        </view>
        <view style="padding-bottom:20rpx">
        </view>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>


const venueCell = Array.from({ length: 20 }, (_, index) => ({
    time: "2024-1-1 12:41", // 时间固定为2024-1-1 12:41
    court: "苏州体育馆" + (index + 1), // 场地名称加上编号
    venueId: index + 1, // 场地ID为索引值加1
}));

.scroll-view-container {
    height: 100%; 
    overflow-y: auto;  
}
这段代码中使用了scroll-view来实现滚动列表,列表中有多个数据需要渲染,venueCell是 20条需要渲染的数据。
也设置了高度 100vh, overflow-y: auto,但是在真机中会出现两个滚动条,我希望只需要一个滚动条,可以在全屏进行滚动(类似微信消息那样)

回答关注问题邀请回答
收藏

1 个回答

  • 朱兆恩(易做图)
    朱兆恩(易做图)
    09-09

    外面那个滚动条是整体滚动,里面这个是内容滚动。

    实在只要一个,只有把整体页面做短点

    09-09
    有用
    回复
登录 后发表内容