微信小程序利用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
})
} })

微信小程序swiper制作内容高度不定的tab选项卡的更多相关文章

  1. 微信小程序swiper高度自适应,swiper的子元素高度不固定

    小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...

  2. 微信小程序swiper实现 句子控app首页滑动卡片

    微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1. ...

  3. 微信小程序在线制作 自己制作微信小程序

    小程序是个什么东西?怎么自己制作微信小程序?微信小程序在线制作难吗?最近老是听这类问题,耳朵都长茧子了. 百牛信息技术bainiu.ltd整理发布于博客园 接下来作为一个技术人员的角度就为大家分析一下 ...

  4. 获取不同机型微信小程序状态栏+导航栏高度

    获取不同机型微信小程序状态栏+导航栏高度 一. 前言 很多时候我们开发微信小程序,都需要先知道状态栏和导航栏的高度,才能去做其他功能 二. 获取微信小程序状态栏高度 用wx.getSystemInfo ...

  5. 微信小程序获取html内容后展示(C#)

    使用场景:微信小程序 具体功能:从服务器获取文章内容 展示在小程序里 使用语言: C# -------------------------------------------------------- ...

  6. 绑定bindchange事件的微信小程序swiper闪烁,抖动问题解决,(将微信小程序切换到后台一段时间,再打开微信小程序,会出现疯狂循环轮播,造成抖动现象)

    微信小程序开发文档-组件-swiper后面追加的新闻如上图所示: 如果在bindchange事件给swiper的current属性对应的值{{current}}赋值,就会造成抖动现象. bindcha ...

  7. 如何自定义微信小程序swiper轮播图面板指示点的样式

    https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...

  8. 微信小程序-从零开始制作一个跑步微信小程序

    来源:伯乐在线 - 王小树 链接:http://ios.jobbole.com/90603/ 点击 → 申请加入伯乐在线专栏作者 一.准备工作 1.注册一个小程序账号,得用一个没注册过公众号的邮箱注册 ...

  9. 微信小程序中公用内容

    微信小程序中各个页面调用公用的js 在util.js文件中 // 跳转哪里 function go(where) { wx.reLaunch({ url: where, }) } // 将方法暴露出去 ...

随机推荐

  1. MS17-010漏洞检测

    1.扫描脚本的下载和加载 由于Metasploit还没有更新MS17-010检测的模块,所以要去exploit-db下载,并在MSF中加载. cd /usr/share/metasploit-fram ...

  2. reids 基本操作

    redis 基本操作 1. 什么是Redis Redis是由意大利人Salvatore Sanfilippo(网名:antirez)开发的一款内存高速缓存数据库.Redis全称为:Remote Dic ...

  3. 每月IT摘录201810

    技术 1.Redis.对于单机实例,我们采用原生主从(Master-Slave)模式实现高可用,常规模式下对外仅暴露 Master 节点.由于使用原生 Redis,所以单机实例支持所有 Redis 指 ...

  4. SpringCloud报错:Caused by: org.springframework.context.ApplicationContextException: Unable to start EmbeddedWebApplicationContext due to missing EmbeddedServletContainerFactory bean.

    今天启动用eureka的服务消费者时,一直出现问题. SpringCloud报错: Caused by: org.springframework.context.ApplicationContextE ...

  5. PHP判断是否都是中文

         {               }       }

  6. java日期加减年月日

    /** * 日期相加减 * @param time * 时间字符串 yyyy-MM-dd HH:mm:ss * @param num * 加的数,-num就是减去 * @return * 减去相应的数 ...

  7. IDEA 创建HDFS项目 JAVA api

    1.创建quickMaven 1.在properties中写hadoop 的版本号并且通过EL表达式的方式映射到dependency中 2.写一个repostory将依赖加载到本地仓库中 这是加载完成 ...

  8. JavaScript各种继承方式(六):寄生组合继承

    一 原理 用寄生继承来改造组合继承. function Fruit(name){ this.name = name; } Fruit.prototype.eat = function(){ conso ...

  9. synchronized细节问题(一)

    synchronized锁重入: 关键字synchronized拥有锁重入的功能,也就是在使用synchronized时,当一个线程得到一个对象的锁后,再次请求此对象时是可以再次得到该对象的锁. 下面 ...

  10. java web获取客户端外网ip和所在区域

    @参考文章1.@参考文章2.@参考文章3.@参考文章4,@之前同事的项目 controller @Controller @RequestMapping("/home") publi ...