本文介绍使用Swiper实现滑动导航与内容联动的方法。针对导航滑动时UI错误及事件触发不稳定等问题，通过调整配置及事件监听策略，确保了导航栏与内容区的平滑切换。
在一次实现导航可滑动 内容可滑动 内容滑动导航跟着滑动的过程中遇见的问题
我要实现类似今日头条导航滑动 和内容联动导航滑动的功能
swiper实现 原先用swiper的控制器 出现滑动到导航没空间时出现ui错误
之后想用分页器来做 但是分页器分页一行不能超出滑动
只能用内容swiper控制顶部swiper
效果如 滑动导航还有更多选项
本人做的是微信开发 用swiper和vue 现贴出自己代码
我的值是监听onSlideChangeStart进行来触发但是遇见一个bug
onSlideChangeStart和onSlideChangeEnd竟然偶尔触发不到；
解决方法：
1.添加 fade:{crossFade:true}
2.切换之后效果， 使用 onSlideChangeEnd（page切换后触发） 会偶尔不触发， 请使用 onTransitionEnd（过度效果结束触发）
现在我们应用到代码中
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>WeUI</title>
<link rel="stylesheet" href="/new/css/weui.css"/>
<link rel="stylesheet" href="/new/css/swiper.min.css">
<link rel="stylesheet" href="/new/css/index.css">
</head>
<body ontouchstart>
<div class="page">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="javascript:;" v-bind:class={"tabtive":tabval==0} v-on:click="tab(0)">全部</a></div>
<div class="swiper-slide"><a href="javascript:;" v-bind:class={"tabtive":tabval==1} v-on:click="tab(1)">文玩配饰</a></div>
<div class="swiper-slide"><a href="javascript:;" v-bind:class={"tabtive":tabval==2} v-on:click="tab(2)">琥珀蜜蜡</a></div>
<div class="swiper-slide"><a href="javascript:;" v-bind:class={"tabtive":tabval==3} v-on:click="tab(3)">白玉翡翠</a></div>
<div class="swiper-slide"><a href="javascript:;" v-bind:class={"tabtive":tabval==4} v-on:click="tab(4)">文玩杂项</a></div>
<div class="swiper-slide"><a href="javascript:;" v-bind:class={"tabtive":tabval==5} v-on:click="tab(5)">注目雕件</a></div>
<div class="swiper-slide"><a href="javascript:;" v-bind:class={"tabtive":tabval==6} v-on:click="tab(6)">玉石</a></div>
</div>
</div>
<div class="swiper-container2">
<div class="swiper-wrapper">
<!--全部-->
<div class="swiper-slide">
<ul>
<li class="product-item">
<a href="javascript:;" class = "external" style="display:block;">
<div class="img"><img src="http://qsh.bjkunya.com/Uploads/2017-06-27/20170627173524595226dc46066_360x360.jpg" class="" title="http://qsh.bjkunya.com/Uploads/2017-06-27/20170627173524595226dc46066_360x360.jpg" class="lazy"></div>
<div class="detail">
<p class="user"><span class="my-font">龙的传人1</span></p>
<span class="my-area">北京市</span>
<span class="my-span">
<span class="" data="">00:00:00</span></span>
</div>
</a>
</li>
<li class="product-item">
<a href="javascript:;" class = "external" style="display:block;">
<div class="img"><img src="http://qsh.bjkunya.com/Uploads/2017-06-27/20170627173524595226dc46066_360x360.jpg" class="" title="http://qsh.bjkunya.com/Uploads/2017-06-27/20170627173524595226dc46066_360x360.jpg" class="lazy"></div>
<div class="detail">
<p class="user"><span class="my-font">龙的传人1</span></p>
<span class="my-area">北京市</span>
<span class="my-span">
<span class="end_{$g.id}" data="{$g.end_time}">00:00:00</span></span>
</div>
</a>
</li>
</ul>
</div>
<div class="swiper-slide">问1</div>
<div class="swiper-slide">问2</div>
<div class="swiper-slide">问3</div>
<div class="swiper-slide">问4</div>
<div class="swiper-slide">问5</div>
<div class="swiper-slide">问6</div>
</div>
<div class="my-more"><div class="font-more">上拉刷新加载更多</div><i class="ibg b_ibg"></i></div>
</div>
<div class="weui-tab__panel">
<div class="weui-tab1" v-show="tabval==1">
</div>
<div class="weui-tab2" v-show="tabval==2">2</div>
<div class="weui-tab3" v-show="tabval==3">3</div>
</div>
</div>
<script src="/new/js/zepto.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script src="/new/js/vue.min.js"></script>
<!-- Swiper JS -->
<script src="/new/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script type="text/javascript">
$(function(){
var vue1= new Vue({
el: '.swiper-container',
data: {
tabval:0,
message: '<h1>菜鸟教程</h1>',
},
mounted:function(){
this.myswiper1();
},
methods:{
tab:function(n){
this.tabval=n;
this.swiper2.slideTo(n, 1000, false);//切换到第一个slide，速度为1秒
},
myswiper1:function(n){
this.swiper1 = new Swiper('.swiper-container',{
slidesPerView: 4,
loop : false,
loopAdditionalSlides : 1,
paginationClickable: true,
});
var _this=this;
this.swiper2 = new Swiper('.swiper-container2',{
//slidesPerView: 0,
initialSlide : n,
parallax:"percentage",
onTransitionEnd: function (swiper) {
_this.tabval=swiper.activeIndex;
_this.swiper1.slideTo(swiper.activeIndex, 1000, false);
},
/**onSlideChangeEnd:function(swiper){
_this.tabval=swiper.activeIndex;
},
onSlideChangeStart:function(swiper){
_this.tabval=swiper.activeIndex;
_this.swiper1.slideTo(swiper.activeIndex, 1000, false)
}这里造成偶尔不触发所以我们不用这两个方法回调**/
});
}
}
})
});
</script>
作者：梁青竹
扫一扫
1876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
