如图这里的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留出来,要不滚动的时候就看不到最下面了 -->
才疏学浅,如果不足,欢迎指出 (。・`ω´・)