小程序订单页面功能实现，以及 swiper 高度多出屏幕问题解决

本文链接：https://blog.youkuaiyun.com/Hero_rong/article/details/106761551

本文介绍了如何在小程序中实现订单页面的swiper组件，确保其在页面中间滑动且不超出屏幕。通过设置合适的高度，减去上下元素高度，解决高度多出屏幕的问题。文章提供wxml、wxss和js的相关代码示例，并分享了解决滚动高度问题的思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图这里的tab页面，嵌套在页面中间的，上面和下面都有东西，如果正常设置高度宽度100%，滑动的时候页面显示的就不是100%了，而是比一个页面多，把上面的元素也加上去了，这样肯定不行的，我现在做的时候，就只让它在中间滑动，不可以超出这个页面

首先我们这个切换tab的页面是用 swipper + scroll-view 做的，看一下wxml

	<view class="service-list">
		<!-- 切换栏 -->
		<view class="swiper-tab">
			<block wx:for="{
  
  {swipertab}}" wx:key="sptab">
				<view class="swiper-tab-list {
  
  {currtab == item.index ? 'on' : ''}}" data-current="{
  
  {item.index}}" bindtap="tabSwitch">{
  
  {item.name}}</view>
			</block>
		</view>
		
		<swiper current="{
  
  {currtab}}" class="swiper-box" duration="300" style="height:{
  
  {deviceH-80}}px" bindchange="tabChange">
			<!-- 店铺首页 -->
			<swiper-item>
				<scroll-view class="hot-box" scroll-y="true">
					<view class="orderDetails" wx:for="{
  
  {waitPayOrder}}" wx:key=" ">
						<view class="orderListTitle">
							<text class="userName">{
  
  {item.name}}</text>
							<text class="orderStatus">{
  
  {item.state}}</text>
						</view>
						<view class="orderListDetails">
							<view class="productImg">
								<image src="{
  
  {item.url}}" background-size="cover"></image>
							</view>
							<view class="productInfo">
								<view class="productTitle">预定时间: {
  
  {item.time}}</view>
								<text class="productPrice">当前状态：{
  
  {item.status}}</text>
							</view>
						</view>
						<view class="productCount">
							<view>
								<text>合计：￥{
  
  {item.money}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 出售服务 -->
			<swiper-item>
				<scroll-view class="hot-box" scroll-y="true">
					<view  class="orderDetails" wx:for="{
  
  {alreadyOrder}}" wx:key=" ">
						<view class="orderListDeta