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

本文介绍了如何在小程序中实现订单页面的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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值