微信小程序利用swiper制作内容高度不定的tab选项卡，不使用absolute定位，不定高度，由内容*撑开
主要思路是获取内容区的高度来给swiper动态设置值
.wxml
<view class='content'>
<view class="swiper-tab">
<view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">第一</view>
<view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">第二</view>
<view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">第三</view>
<view class="swiper-tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">第四</view>
<view class="swiper-tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="clickTab">第五</view>
</view>
<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab">
<swiper-item>
<!--logs.wxml-->
<scroll-view scroll-y="true">
作词：林夕 作曲：陈辉扬 Monday 陈奕迅--十周年如果那两个字没有颤抖 我不会发现我难受 怎么说出口 也不过是分手 如果对于明天没有要求 牵牵手就想旅游 成千上万个门口 总有一个人要先走 怀抱既然不能逗留 何不在离开的时候 一边相守 一边泪流 十年之前 我不认识你 你不属于我 我们还是一样 陪在一个陌生人左右 走过肩前熟悉的街头 十年之后 我们是朋友 还可以问候 只是那种温柔 再也找不到拥抱的理由 情人最后难免沦为朋友 直到和你做了多年朋友 才明白我的眼泪 不是为你而流 也为别人而流 作者--Monday
编辑于2008/3/27更新 十年歌词完整版
</scroll-view>
</swiper-item>
<swiper-item>
<!--logs.wxml-->
<scroll-view scroll-y="true">
《老男孩猛龙过江》宣传曲《小苹果》 作词：王太利 作曲：王太利 演唱：筷子兄弟 编曲／制作人：赵佳霖 吉他：张圣功 伴唱：王馨悦 刘辉阳 王筱海 靳锐 混音：江松松 录音：王骏卓 我种下一颗种子，终于长出了果实，今天是个伟大日子 摘下星星送给你，拽下月亮送给你，让太阳每天为你升起 变成蜡烛燃烧自己，只为照亮你，把我一切都献给你，只要你欢喜 你让我每个明天都 变得有意义，生命虽短爱你永远，不离不弃 你是我的小呀小苹果儿 怎么爱你都不嫌多 红红的小脸儿温暖我的心窝 点亮我生命的火 火火火火 你是我的小呀小苹果儿
就像天边最美的云朵 春天又来到了花开满山坡 种下希望就会收获 从不觉得你讨厌，你的一切都喜欢 有你的每天都新鲜 有你阳光更灿烂，有你黑夜不黑暗 你是白云我是蓝天 春天和你漫步在盛开的 花丛间 夏天夜晚陪你一起看 星星眨眼 秋天黄昏与你徜徉在 金色麦田 冬天雪花飞舞有你 更加温暖 你是我的小呀小苹果儿 怎么爱你都不嫌多 红红的小脸儿温暖我的心窝 点亮我生命的火 火火火火 你是我的小呀小苹果儿 就像天边最美的云朵 春天又来到了花开满山坡 种下希望就会收获 你是我的小呀小苹果儿 怎么爱你都不嫌多
红红的小脸儿温暖我的心窝 点亮我生命的火 火火火火 你是我的小呀小苹果儿 就像天边最美的云朵 春天又来到了花开满山坡 种下希望就会收获 编辑于2014/5/29更新 小苹果歌词完整版
<br/> 《老男孩猛龙过江》宣传曲《小苹果》 作词：王太利 作曲：王太利 演唱：筷子兄弟 编曲／制作人：赵佳霖 吉他：张圣功 伴唱：王馨悦 刘辉阳 王筱海 靳锐 混音：江松松 录音：王骏卓 我种下一颗种子，终于长出了果实，今天是个伟大日子 摘下星星送给你，拽下月亮送给你，让太阳每天为你升起 变成蜡烛燃烧自己，只为照亮你，把我一切都献给你，只要你欢喜 你让我每个明天都 变得有意义，生命虽短爱你永远，不离不弃 你是我的小呀小苹果儿 怎么爱你都不嫌多 红红的小脸儿温暖我的心窝 点亮我生命的火 火火火火 你是我的小呀小苹果儿
就像天边最美的云朵 春天又来到了花开满山坡 种下希望就会收获 从不觉得你讨厌，你的一切都喜欢 有你的每天都新鲜 有你阳光更灿烂，有你黑夜不黑暗 你是白云我是蓝天 春天和你漫步在盛开的 花丛间 夏天夜晚陪你一起看 星星眨眼 秋天黄昏与你徜徉在 金色麦田 冬天雪花飞舞有你 更加温暖 你是我的小呀小苹果儿 怎么爱你都不嫌多 红红的小脸儿温暖我的心窝 点亮我生命的火 火火火火 你是我的小呀小苹果儿 就像天边最美的云朵 春天又来到了花开满山坡 种下希望就会收获 你是我的小呀小苹果儿 怎么爱你都不嫌多
红红的小脸儿温暖我的心窝 点亮我生命的火 火火火火 你是我的小呀小苹果儿 就像天边最美的云朵 春天又来到了花开满山坡 种下希望就会收获 编辑于2014/5/29更新 小苹果歌词完整版
</scroll-view>
</swiper-item>
<swiper-item>
<!--logs.wxml-->
<scroll-view scroll-y="true">
5689
</scroll-view>
</swiper-item>
<swiper-item>
<view>肖懿航&王矜霖&肖洒&胡维纳&唐一嘉&陈俊豪&田斯斯&六弦 一路上有你 - 肖懿航 王矜霖 肖洒 胡维纳 唐一嘉 陈俊豪 田斯斯 六弦 一路上有你 苦一点也愿意 就算是为了分离与我相遇 一路上有你 痛一点也愿意 就算这辈子注定要和你分离 你知道吗 爱你并不容易 还需要很多勇气 是天意吧 好多话说不出去 就是怕你负担不起 你相信吗 这一生遇见你 是上辈子我欠你的 是天意吧 让我爱上你 才又让你离我而去 也许轮回里 早已注定 今生就该我还给你 一颗心在风雨里 飘来飘去 都是为你 一路上有你
苦一点也愿意 就算是为了分离与我相遇 一路上有你 痛一点也愿意 就算这辈子注定要和你分离 一路上有你 苦一点也愿意 就算是为了分离与我相遇 一路上有你 痛一点也愿意 就算这辈子注定要和你分离 就算只能在梦里拥抱你 编辑于2013/9/16更新 一路上有你歌词完整版
</view>
</swiper-item>
<swiper-item>
<!--logs.wxml-->
<scroll-view scroll-y="true">
123456
</scroll-view>
</swiper-item>
</swiper>
</view>
.wxss
.content{
position: absolute;
top:;
right:;
width: 100%;
height: 100%;
}
swiper{
display: flex;
height: 100%;
}
swiper-item{
height: 100%;
overflow:scroll;
overflow-x:hidden;
}
scroll-view {
height: 100%;
}
.swiper-tab-item{
display: inline-block;
width: 20%;
text-align: center;
border-bottom: 1px solid #dddddd;
}
.active{
border-bottom: 1px solid #db2312;
}
.js
Page({
data: {
currentTab:0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that=this;
wx.getSystemInfo({
success: function (res) {
let clientHeight = res.windowHeight,
clientWidth = res.windowWidth,
rpxR = 750 / clientWidth;
var calc = clientHeight * rpxR;
console.log(calc)
that.setData({
windowHeight: calc
});
}
});
},
//点击切换
clickTab: function (e) {
var that = this;
if (this.data.currentTab === e.currentTarget.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.currentTarget.dataset.current
})
}
},
swiperTab: function (e) {
var that = this;
this.setData({
currentTab: e.detail.current
})
}
})