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

如图这里的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="orderListDetails">
							<view class="productImg">
								<image src="{{item.url}}" background-size="cover"></image>
							</view>
							<view class="productInfo">
								<view class="productTitle">{{item.name}}</view>
								<view class="tips">
									<view wx:for='{{item.tips}}' wx:for-index='index' wx:for-item='tipItme'>{{tipItme}}</view>
								</view>
								<text class="productPrice">成交：{{item.number}}笔</text>
								<view class="rightPrice">￥{{item.price}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 作品案例 -->
			<swiper-item>
				<scroll-view class="hot-box" scroll-y="true">
					<view class="caseList">
					<view class="case" wx:for="{{lostOrder}}" wx:key=" ">
						<view class="image">
						<image></image>
						</view>
						<view>{{item.name}}</view>
					</view>
					</view>
				</scroll-view>
			</swiper-item>
		
		</swiper>
	</view>
	<!-- 若不需要可以删除，因为截图上有，所以就一起放上来了，只是为了方便看 -->
	<view class="footer">
		<view class="ask">
			<view class="image">
				<image></image>
			</view>
			<view>咨询一下</view>
		</view>
		<view class="collection">
			<view class="image">
				<image></image>
			</view>
			<view>收藏店铺</view>
		</view>
		<view class="use">
			<view class="image">
				<image></image>
			</view>
			<view>雇佣TA</view>
		</view>
	</view>

然后我们看一下 wxss 样式

.service-list {
  margin-top: 14rpx;
}

/* 中间滑动页面 */
/*切换栏*/
.hot-box {
  height: 100%;
}
.swiper-tab {
  height: 40px;
  line-height: 40px;
  background: #3B3B3B;
  color:#fff ;
  display: flex;
  justify-content: space-around;
  position: relative;
  z-index: 2;
  flex-direction: row;
  align-items: center;
  border-bottom:1px solid black;
}
 
.swiper-tab-list {
  padding: 0 4px;
  font-size: 15px;
}
 
.on {
  border-bottom:2px solid #fff;
  color: #f5f5f5;
}
 
.navTopList {
  display: flex;
  width: 100%;
  height: 70rpx;
  background: #fff;
  border-bottom: 1rpx solid #BEBEBE	;
  margin-top:5px;
}
 
.navTopList .order-info {
  text-align: center;
}
 
.navTopList .order-info view {
  width: 56rpx;
  height: 56rpx;
  margin-left: 31rpx;
}
 
.navTopList .order-info text {
  font-size: 34rpx;
}
 
.navTopList .order-info text.active {
  color: #ff6662;
}
 
.navTopList .ywc,.navTopList .dfk,.navTopList .yqx {
  flex: 1;
}
 
 
/*订单列表*/
.orderDetails {
  background: #fff;
  border-bottom: 4rpx solid #f5f5f5;
}
 
.orderListTitle {
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #BEBEBE;
}
 
.orderListTitle .userName {
  padding-right: 50rpx;
  margin-left:10px;
}
 
.orderListTitle .orderStatus {
  float: right;
  margin-right: 20rpx;
  color: #2f7b27;
  font-size: 34rpx;
}
 
.orderListDetails {
  display: flex;
  border-bottom: 1rpx solid #f3f3f3;
}
 
.orderListDetails .productImg {
  flex: 1;
  height:180rpx;
  width:120px;
  margin-top: 20rpx;
  margin-left: 20rpx;
  border: solid;
  border-radius: 18rpx;
}
 
.orderListDetails .productImg image {
  width: 100px;
  height: 90%;
}
 
.orderListDetails .productInfo {
  flex: 4;
  margin: 40rpx 10px 20px 30rpx;
  font-size:15px;
  position: relative;
}
.orderListDetails .productInfo .productPrice {
  color: #999;
  font-size: 22rpx;
}
.orderListDetails .productInfo .rightPrice {
  position: absolute;
  top: 0;
  right: 0;
  color: red;
  font-weight: bold;
}
 
.orderListDetails .productInfo .productTitle {
  font-size:15px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.orderListDetails .productInfo .tips {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 56rpx;
  margin-top: 10rpx;
}
.orderListDetails .productInfo .tips view {
  border: solid rgb(164,214,202) 2rpx;
  border-radius: 7rpx;
  color: rgb(164,214,202);
  font-size: 22rpx;
  padding: 2rpx 24rpx;
  margin-right: 24rpx;
}
/* 案例样式 */
.caseList {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 98%;
  margin: 0 auto;
  padding-bottom: 108rpx;
}
.case {
  width: 46%;
  text-align: center;
  background-color: #fff;
  padding: 24rpx 0;
  border-radius: 14rpx;
  margin-top: 24rpx;
  margin-left: 10px;
}
.case .image {
  border: solid red 2rpx;
  width: 90%;
  height: 288rpx;
  background-color: red;
  margin: 0 auto;
  border-radius: 14rpx;
  overflow: hidden;
}
.case .image image {
  width: 100%;
  height: 100%;
}
.case view {
  text-align: center;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  margin: 10rpx auto auto auto;
  font-size: 30rpx;
  width: 90%;
}

/* 页脚固定 若不需要这些元素可以删除 */
.footer {
  border: solid red 2rpx;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80rpx;
  display: flex;
}
.footer>view {
  background-color: #FFF;
  color: #999;
  border: solid red 2rpx;
  width: 30%;
  text-align: center;
}
.footer>.use {
  width: 40%;
  display: flex;
  background-color: rgb(80,112,249);
  line-height: 64rpx;
}
.footer .image {
  width: 30rpx;
  height: 30rpx;
  border: solid red 2rpx;
  margin: 0 auto;
}
.footer .use .image {
  margin: 16rpx 20rpx;
}

再然后我们看一下 js ，这里比较重要的

第一步，这是data 里面的数据， currtab 是为了页面切换的，swipertab 数组是要切换的页面，需要几个页面就在这里添加几个

  data: {
		currtab: 0,
		swipertab: [{ name: '店铺首页', index: 0 }, { name: '出售服务', index: 1 }, { name: '作品案例', index: 2 }, { name: '店铺详情', index: 3 }],
  },

第二部，添加事件

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
	onReady: function () {
		// 页面渲染完成
		this.getDeviceInfo()
		this.orderShow()
	},
	
	getDeviceInfo: function () {
	  let that = this
		var query = wx.createSelectorQuery();
		//选择元素
		let needHeight
		query.select('.introduce').boundingClientRect(function (rect) {
			console.log('上面的高度',rect.height)
			needHeight = rect.height
		}).exec();
		query.select('.good-skill').boundingClientRect(function (rect) {
			console.log('下面的高度',rect.height)
			needHeight = needHeight + rect.height
		}).exec();
		console.log('needHeight==',needHeight);
		setTimeout(function() {
			console.log('needHeight==============',needHeight);
			wx.getSystemInfo({
				success: function (res) {
					that.setData({
						deviceW: res.windowWidth,
						deviceH: res.windowHeight - needHeight
					})
				}
			})
		}, 100);
	},
	 
	/**
	* @Explain：选项卡点击切换
	*/
	tabSwitch: function (e) {
	  var that = this
	  if (this.data.currtab === e.target.dataset.current) {
	    return false
	  } else {
	    that.setData({
	      currtab: e.target.dataset.current
	    })
	  }
	},
	
	tabChange: function (e) {
	  this.setData({ currtab: e.detail.current })
	  this.orderShow()
	},
	 
	orderShow: function () {
	  let that = this
	  switch (this.data.currtab) {
	    case 0:
	      that.alreadyShow()
	      break
	    case 1:
	      that.waitPayShow()
	      break
	    case 2:
	      that.lostShow()
	      break
	  }
	},
	alreadyShow: function(){
	  this.setData({
	    alreadyOrder: [{ number: "12", name: "网站建设", price: '2000', tips:['网站建设', '小程序建设'], url: "../../images/bad0.png"}, { number: "22", name: "小程序建设", price: '2000', tips:['网站建设', '小程序建设'], url: "../../images/bad0.png"},]
	  })
	},
	 
	waitPayShow:function(){
	  this.setData({
	    waitPayOrder: [{ name: "跃动体育运动俱乐部(圆明园店)", state: "待付款", time: "2018-10-14 14:00-16:00", status: "未开始", url: "../../images/bad1.jpg", money: "186" }],
	  })
	},
	
	lostShow: function () {
	  this.setData({
	    lostOrder: [ { name: "跃动"}, { name: "跃动体育运动俱乐部(圆明园店)"}, { name: "跃动体育运动俱乐部(圆明园店)"}, { name: "跃动体育运动俱乐部(圆明园店)"}, { name: "跃动体育运动俱乐部(圆明园店)"},{ name: "ceshiceshi"},{ name: "cehsi"}],
	  })
	},

上面实现这个功能的话，代码直接复制就可以了，但是有个小知识点，swipper 滚动高度的问题，就要仔细看这里了 

我们的思路是这样的，由于我这个 tab 切换的页面是在中间的，所以我们要获取到页面的高度，然后减去 上面元素的高度，剩下的，就是可以滚动的高度了（具体问题具体分析，我这里就是举这个例子，大家可以举一反三，原理都是一样的）

let that = this
let needHeight
var query = wx.createSelectorQuery();
//选择元素
query.select('.introduce').boundingClientRect(function (rect) {
  console.log('上面的高度',rect.height)
  needHeight = rect.height
  //这里就是我上面标签所占用的高度
}).exec();



//这里就是获取屏幕的可视高度啦
wx.getSystemInfo({
  success: function (res) {
    that.setData({
      deviceW: res.windowWidth,   // res.windowWidth 这里是获取到宽度
      deviceH: res.windowHeight - needHeight     //res.windowHeight 是获取高度，用获取到的高度减去 我页面上方的元素的高度，就是我 swipper 可以滚动的高度了
    })
  }
})

<swiper current="{{currtab}}" class="swiper-box" duration="300" style="height:{{deviceH - 80}}px" bindchange="tabChange">
<!-- 滚动的高度这里直接设置就可以了，我之所以减了80是因为我下面有固定80的元素，它会遮挡，所以我要把这80留出来，要不滚动的时候就看不到最下面了 -->

才疏学浅，如果不足，欢迎指出 (｡・`ω´･)