swiper里面的,tab切换,不同的slide高度不一样,外层高度何如随之改变,如果里面的每一屏的高度不一样,那么就会一直以高度最大的一个座位最外层的高度,总成了页面内容少的那一页有很大空白,改如何动态改变外层的高度呢

解决方案:1.autoHeight: true;缺点:有明显的跳动效果
2.先给容器设固定高度,每次滑动多少时,改变当前tab页的容器高度,我在实现是遇到一点小问题,代码忘记保存了。

3.滑动切换第二个页面的顶部,需要用scrollTop实现,

onSlideChangeStart: function(swiper){
//$( ‘.swiper-container‘ ).scrollTop(0);这样是直接到顶部,往往会出现闪屏,
$( ‘.swiper-container‘ ).animate({scrollTop: 0},10);//动画慢慢过渡到顶部
}

4.在每个tab页加上垂直方向的swiper,并设置freeMode: true,
美中不足的是: 必须给每个垂直方向的swiper-slide设置固定高度,否则一块会占整个屏幕页面
代码如下:
var mySwiperIndex = new Swiper(‘#swiper-container-index‘, {
slidesPerView: ‘auto‘,
direction: ‘vertical‘,
freeMode: true,
freeModeMomentum: false,
freeModeMomentumBounce: false,
onSlideNextStart: function(swiper) {//回调函数,滑块释放时如果触发slider向前(右、下)切换则执行。类似于onSlideChangeStart
var i = swiper.activeIndex;
//根据i来判断要加载该部分以的方法,预加载

}
});
mySwiperIndex.on("TouchEnd", function(swiper) {
//下拉加载
if (swiper.isEnd) {

LoadingMore();//加载更多

}

//上拉刷新
if (swiper.translate > 0) {
window.location.reload();//这里应该是根据不同的tab加载不同的方法
}
});

先到这里,应该还有更好更简单的方法以后遇到了在分享吧。

时间: 2024-10-07 06:13:27

swiper里面的,tab切换,不同的slide高度不一样,外层高度何如随之改变,如果里面的每一屏的高度不一样,那么就会一直以高度最大的一个座位最外层的高度,总成了页面内容少的那一页有很大空白,改如何动态改变外层的高度呢的相关文章

关于一个页面的tab切换整体页面刷新而tab标签处是同一个文件怎么做焦点的问题

解决方法,不能直接写点击效果就要在超链接中加一个参数,根据参数的值去给变焦点的效果,实现方法如下: <div class="vip_search">             <div class='vip_search1'>                 <div class='vip_search1a' >                     <ul class='texts'>                         &

有关swiper动态改变数据遇到的坑(不能自动滚动,自动跟新数据,切换不正常)

以前都觉得swiper的使用很简单,那是因为使用swiper时都是写的数据,按照官网上介绍直接初始化swiper,随便丢一个地方初始化就ok了,但是在很多需求中,我们都需要动态的改变数据,这样可能就会遇到很多问题. 以下简单说说最近遇到的问题: 开发需求是需要通过接口请求来动态的改变swiper数据,在这里偷了一个懒,直接用vue驱动数据的改变,就只写了一个swiper,直接通过数据改变驱动swiper里数据的切换. 最开始是模拟的数据,这样开始使用起来是没有问题的,但是在使用真实数据后就有一大

友盟推送里面的Alias怎么用?可以理解成账号吗?

友盟推送里面的Alias怎么用?可以理解成账号吗? 我们的App有自己的账号体系的,想在每次用户登陆的时候,给用户发一个欢迎消息. 看了一下友盟推送,里面有一个概念叫做Alias(别名),但是官方文档写着Alias是和设备绑定的,感觉Alias算不上是严格意义的账号.不知道其它集成过友盟推送的兄弟们是否有类似的需求,是否可以通过友盟推送提供的Alias功能来满足我们的需求? 作者:沙漠链接:http://www.zhihu.com/question/31882775/answer/5425406

跨域IFRAME自适应高度(子页面TAB切换不同的高度,主页面IFRAME嵌套子页面自适应高度)

1.pinganproxy.html <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">eval(function(p,a,c,k,e,r){e=fu

让里面的div撑开外面的div,让高度自适应

<!-- 设置clearfloat样式,让里面的div撑开外面的div,让高度自适应 --> <style type="text/css"> .clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;} </style> </head> <div class="choose-bg-box"> <c:forEach items=&qu

里面的div没有设置宽高,用padding设置的50px来撑开宽高,这个时候就需要用position:absolute或者relative来让文本去掉继承的外层的整宽度

1. <!DOCTYPE html><html><head><style>*{margin:0px;padding:0px;}#div1{position: relative;height: 200px;width: 200px;margin: 100px;padding:10px;border: 1px solid black;} #div2{padding:50px;position: absolute;border: 1px solid black;b

里面的div怎么撑开外面的div让高度自适应

参考网址:http://www.jb51.net/css/140685.html 随着微软新操作系统的上市,ie6现在用的人越来越少了,但是XP系统看来是太过经典,仍然有相当多的用户在使用,且这部分人群中的大部分也没有单独升级浏览器的习惯,于是乎ie6依旧是使用最多的浏览器版本.根据本站流量的统计,来自ie6的访问比重为72.6%.表明了以上的观点,虽然最高的时候,ie6占了90%以上. 言归正传,div+css作为网页的布局已经是大势所趋.它的优点不在这里啰嗦.但最近经常有朋友提到关于容器高度

vant weapp tab切换 结构隐藏 下方高亮线消失解决方案

最近在做微信小程序 用到了 vant weapp 框架,在使用tab切换的时候,发现如果html结构在 display:none 的情况下,tab下方高亮线消失了,查了好几天方案,发现高亮线宽度渲染出来了,但是宽度为0,后边又发现,只要是结构隐藏,可能很多样式渲染都会出现一些问题,大家做的时候小心一点哦,小心被 ui 喷,开个玩笑,言归正传,上解决方案. 我这边是这样的,默认进入小程序,底部3个 tabbar 切换,由于自带 tabbar 太卡了,把每一个都封装成了组件,在组件的外层多嵌套一层

Camera和百度地图在TabActivity里,互相切换导致显示紊乱问题解决

今天遇到一个奇葩问题,一个app的大框架是下面有四个Tab页,于是我用了TabActivity,其中两个tab页分别是扫一扫和百度地图的activity.问题来了,如果点击tab页进到Camera里,扫描正常,但是再点击地图进去,整个地图就显示不出来了.反之先进去百度地图,再进camera,也是同样问题,只有地图在上面盖着,Camera预览在下面显示不出来. 示例如下: 经过咋家分析,原因里Camera使用了Surfaceview作预览载体,Surfaceview具有抢占窗口的特性,他本质上不是