实现微信小程序中间部分导航滑动--swiper组件

一、实现效果图

二、实现方法 swiper组件

主要点在于组件中的 display-multiple-items 属性以及 float: left浮动图标，下面的指示点是另外加的新样式

ps： 如果光实现浮动会变成下面这样

如果在加上 display-multiple-items 属性那会有很大变化哦！

三、事例代码

wxml

	

		
			
				
					
						
						菜单111
					
				
			
		
		
			
				
					
						
						菜单222
					
				
			
		
		
			
				
					
						
						菜单333
					
				
			
		
		
			
				
					
						
						菜单444
					
				
			
		
		
			
				
					
						
						菜单555
					
				
			
		
		
			
				
					
						
						菜单666
					
				
			
		


	
  
         
         
       

wxss

/* 头部导航开始  */
.icon-wrapper  image{width: 60rpx; height: 60rpx; display: block; margin:0 auto 10rpx;}
.icon-wrapper  text{display: block;}
.headerModel .swiper-item{
  float: left;  //使得图表浮动
  width: 100%;
  text-align: center;
}
.modelDots{
  width:60rpx;
  height:6rpx;
  background: #107EEF;
  margin:0 auto;
  display: flex;
}
.mdDot{
  width:30rpx;
  height:6rpx;
  flex:1;
}
.mdDot.active{
  background: #D0D0D0;
}



/* 头部导航结束  */

js

 data: {
  
    imgUrls:[
      '/images/1.jpg',
      '/images/2.jpg',
      '/images/3.jpg'
    ],
    indicatorDots:false,
    autoplay: true,
    interval: 3000,
    duration: 1000,
    circular:true,
    mddotSwiper:0
  },

  mddotChange: function (e) {
    // currentSwiper  滑动指示器
    console.log(e.detail.current)
    this.setData({
      mddotSwiper: e.detail.current
    })
  },

以下是滑动组件打印的值，可根据这个值来判断指示点的显示