效果如下
需要注意的地方
swiper标签有默认的高度,展示更多的话需要另外设置height值
这里的scroll-view设置占满整个屏幕,height设置100%;swiper的height设置成屏幕的高度(除去tab栏的高度),需要微信提供的api获取设备屏幕高度数据
wx.getSystemInfo({
success: (res) => {
let windowHeight = res.windowHeight
this.setData({
windowHeight: windowHeight
})
}
})
wx.getSystemInfo API还可以获取以下信息,包括brand( 品牌)、model(型号)、platform(系统)等
.wxml
<view>
<view class="tab">
<view class="{{tab_index == 0 ? 'tab-active':''}}" data-index="0" catchtap="selectTab">1</view>
<view class="{{tab_index == 1 ? 'tab-active':''}}" data-index="1" catchtap="selectTab">2</view>
<view class="{{tab_index == 2 ? 'tab-active':''}}" data-index="2" catchtap="selectTab">3</view>
</view>
<swiper
style="height: {{windowHeight - 50}}px"
bindchange="tabChange"
current="{{tab_index}}"
>
<swiper-item>
<scroll-view
style="height: 100%;"
scroll-y
bindscroll="scroll"
bindscrolltolower="reactBottom"
scroll-with-animation
scroll-top="{{scrollTop0}}px"
>
<block wx:for="{{30}}" wx:key="{{index}}">
<view class="item item1">{{index + 1}}</view>
</block>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view
style="height: 100%;"
scroll-y
bindscroll="scroll"
bindscrolltolower="reactBottom"
scroll-with-animation
scroll-top="{{scrollTop1}}px"
>
<block wx:for="{{30}}" wx:key="{{index}}">
<view class="item item2">{{index + 1}}</view>
</block>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view
style="height: 100%;"
scroll-y
bindscroll="scroll"
bindscrolltolower="reactBottom"
scroll-with-animation
scroll-top="{{scrollTop2}}px"
>
<block wx:for="{{30}}" wx:key="{{index}}">
<view class="item item3">{{index + 1}}</view>
</block>
</scroll-view>
</swiper-item>
</swiper>
<view class="backTop" catchtap="backTop"></view>
</view>
.css
.item {
margin-bottom: 20rpx;
width: 100%;
height: 100rpx;
text-align: center;
line-height: 100rpx;
}
.item1 {
background: lightblue;
}
.item2 {
background: lightgrey;
}
.item3 {
background: lightgreen;
}
.item:last-child {
margin-bottom: 0;
}
.tab {
display: flex;
justify-content: space-between;
width: 100%;
height: 100rpx;
line-height: 100rpx;
box-sizing: border-box;
}
.tab-active {
border-bottom: 2rpx solid orangered;
}
.tab > view {
flex: 1;
text-align: center;
}
swiper {
position: fixed;
top: 100rpx;
left: 0;
bottom: 0;
width: 100%;
}
.backTop {
position: fixed;
right: 30rpx;
bottom: 50rpx;
width: 100rpx;
height: 100rpx;
background: rgba(0, 0, 0, 0.5);
z-index: 30;
border-radius: 50%;
}
.js
// pages/swiper2/swiper2.js
Page({
/**
* 页面的初始数据
*/
data: {
tab_index: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.systemType()
},
scroll (event) {
console.log(event)
},
reactBottom () {
console.log('触底-加载更多')
},
// 获取设备屏幕高度
systemType () {
wx.getSystemInfo({
success: (res) => {
let windowHeight = res.windowHeight
this.setData({
windowHeight: windowHeight
})
console.log(res)
}
})
},
tabChange (event) {
this.setData({
tab_index: event.detail.current
})
},
// tab栏选择
selectTab (event) {
this.setData({
tab_index: event.currentTarget.dataset.index
})
},
// 返回顶部
backTop () {
let tab_index = this.data.tab_index
this.setData({
['scrollTop' + tab_index]: 0
})
},
})
|
请发表评论