写swiper的时候高度无法撑开,也不想用js动态设置高度,就可以利用flex弹性布局来撑开高度,效果如下。
wxml部分
<view class='ranking fz32'>
<view class='ranking-date bgFFF'>
<picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
<view class="ranking-picker">
<text class='picker-text fz26 fw400'>{{date}}</text>
<image class="picker-image" src="/images/icon/arrow_d.png"></image>
</view>
</picker>
</view>
<view class='ranking-swiper'>
<view class='swiper-tab bgFFF'>
<view class="swiper-tab-item {{currentTab==index?'tabActive':''}}" wx:for="{{rankTitle}}" wx:key="index" data-current='{{index}}' bindtap="clickTab">
<text>{{item.title}}</text>
</view>
</view>
<swiper class='swiper-box bgFFF' duration="300" bindchange="swiperTab" current="{{currentTab}}">
<swiper-item wx:for="{{rankList}}" wx:key="index" duration="300">
<view class='swiper-box-title'>
<view>排名</view>
<text>姓名</text>
<view>核销券数</view>
</view>
<scroll-view scroll-y>
<view class='swiper-box-list'>
<view class='swiper-box-item' wx:for="{{item.subList}}" wx:for-item="newItem" wx:key="index">
<view>{{newItem.rank}}</view>
<image src='{{newItem.image}}'></image>
<text>{{newItem.name}}</text>
<view>{{newItem.score}}</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
js部分
const app = getApp().globalData;
Page({
/**
* 页面的初始数据
*/
data: {
date: '2016-09-01',
currentTab: 0,
rankTitle: [{
title: '销量榜',
},
{
title: '销售额榜',
},
{
title: '签约榜',
}
],
rankList: [{
subList: [{
rank: 1,
image: '',
name: 'EOS主网启动直播',
score: '12131',
},
{
rank: 1,
image: '',
name: 'EOS主网启动直播',
score: '12131',
},
{
rank: 1,
image: '',
name: 'EOS主网启动直播',
score: '12131',
},
{
rank: 1,
image: '',
name: 'EOS主网启动直播',
score: '12131',
},
{
rank: 1,
image: '',
name: 'EOS主网启动直播',
score: '12131',
},
{
rank: 1,
image: '',
name: 'EOS主网启动直播',
score: '12131',
},
{
rank: 1,
image: '',
name: 'EOS主网启动直播',
score: '12131',
},
{
rank: 1,
image: '',
name: 'EOS主网启动直播',
score: '12131',
},
{
rank: 1,
image: '',
name: 'EOS主网启动直播',
score: '12131',
},
{
rank: 1,
image: '',
name: 'EOS主网启动直播',
score: '12131',
},
{
rank: 1,
image: '',
name: 'EOS主网启动直播',
score: '12131',
},
{
rank: 1,
image: '',
name: 'EOS主网启动直播',
score: '12131',
},
{
rank: 1,
image: '',
name: 'EOS主网启动直播',
score: '12131',
},
{
rank: 1,
image: '',
name: 'EOS主网启动直播',
score: '12131',
},
{
rank: 1,
image: '',
name: 'EOS主网启动直播',
score: '12131',
},
{
rank: 1,
image: '',
name: 'EOS主网启动直播',
score: '12131',
},
],
}, {
subList: [{
rank: 1,
image: '',
name: '罗威',
score: '12131',
},
{
rank: 1,
image: '',
name: '罗威',
score: '12131',
},
],
}, {
subList: [{
rank: 1,
image: '',
name: '杨峰',
score: '12131',
},
{
rank: 1,
image: '',
name: '杨峰',
score: '12131',
},
],
}]
},
//日期选择
bindDateChange: function(e) {
console.log('picker发送选择改变,携带值为', e.detail.value)
this.setData({
date: e.detail.value
})
},
//滑动切换
swiperTab: function(e) {
var that = this;
that.setData({
currentTab: e.detail.current
});
},
//点击切换模式
clickTab: function(e) {
var that = this;
if (that.data.currentTab == e.currentTarget.dataset.current){
return false;
}else{
that.setData({
currentTab: e.currentTarget.dataset.current
})
}
}
})
最后附上wxss
page {
height: 100%;
background-color: #F1F1F1;
color: #191919;
}
.bgFFF{
background: #fff
}
.ranking {
height: 100%;
display: flex;
flex-direction: column;
}
.ranking-date {
border-top: 2rpx solid #e0e0e0;
border-bottom: 2rpx solid #e0e0e0;
}
.ranking-picker {
padding: 37rpx 30px;
}
.ranking-picker .picker-image {
width: 20rpx;
height: 20rpx;
margin-left: 15rpx;
}
.ranking .ranking-swiper {
flex: 1;
display: flex;
flex-direction: column;
}
/*榜单选项卡*/
.swiper-tab {
display: flex;
}
.swiper-tab-item {
flex: 1;
text-align: center;
color: #969696;
font-size: 24rpx;
padding: 35rpx 0;
}
.swiper-tab-item.tabActive >text {
padding: 35rpx 15rpx;
color: #11be84;
border-bottom: 1px solid #11be84;
}
.swiper-box {
margin-top: 30rpx;
flex: 1;
}
.swiper-box scroll-view {
height: 100%;
padding-top:60rpx;
box-sizing: border-box;
}
.swiper-box-title {
display: flex;
height: 60rpx;
line-height: 60rpx;
border-bottom: 1rpx solid #f1f1f1;
font-size: 24rpx;
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.swiper-box-title >view:first-child {
text-align: center;
width: 120rpx;
}
.swiper-box-title >text {
flex: 1;
margin: 0 40rpx;
}
.swiper-box-title >view:last-child {
text-align: center;
width: 180rpx;
}
.swiper-box-item {
display: flex;
align-items: center;
padding: 30rpx 0;
}
.swiper-box-item:nth-child(2n) {
background: #f6f6f6;
}
.swiper-box-item >view:first-child {
text-align: center;
width: 120rpx;
}
.swiper-box-item >image {
width: 68rpx;
height: 68rpx;
background: #11be84;
border-radius: 100%;
}
.swiper-box-item >text {
flex: 1;
margin-left: 12rpx;
line-height: 68rpx;
}
.swiper-box-item >view:last-child {
text-align: center;
width: 180rpx;
}
/*隐藏滚动条*/
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}