如圖這裏的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留出來，要不滾動的時候就看不到最下面了 -->
才疏學淺，如果不足，歡迎指出 (｡・`ω´･)