解决方案: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加载不同的方法
}
});
先到这里,应该还有更好更简单的方法以后遇到了在分享吧。