<view>
<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>
<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,但是在真机中会出现两个滚动条,我希望只需要一个滚动条,可以在全屏进行滚动(类似微信消息那样)
外面那个滚动条是整体滚动,里面这个是内容滚动。
实在只要一个,只有把整体页面做短点