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

一、实现效果图

二、实现方法 swiper组件

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

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

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

三、事例代码

wxml

<!--头部导航开始 -->
<view class="headerModel">
	<swiper indicator-dots="{{indicatorDots}}" display-multiple-items="5"  bindchange="mddotChange">

		<swiper-item>
			<view class="swiper-item">
				<view class="icon-wrapper ">
					<navigator class="nav" url="/pages/baoxiu/bx" open-type="navigate" hover-class="none">
						<image class="" src="/images/bx.png" mode="scaleToFill"></image>
						<text>菜单111</text>
					</navigator>
				</view>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item ">
				<view class="icon-wrapper ">
					<navigator class="nav" url="/pages/paylist/pay" open-type="navigate" hover-class="none">
						<image class="" src="/images/jf.png" mode="scaleToFill"></image>
						<text>菜单222</text>
					</navigator>
				</view>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item ">
				<view class="icon-wrapper ">
					<navigator class="nav" url="/pages/yijian/yj" open-type="navigate" hover-class="none">
						<image class="" src="/images/jy.png" mode="scaleToFill"></image>
						<text>菜单333</text>
					</navigator>
				</view>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item ">
				<view class="icon-wrapper ">
					<navigator class="nav" url="/pages/shenfen/sf" open-type="navigate" hover-class="none">
						<image class="" src="/images/rz.png" mode="scaleToFill"></image>
						<text>菜单444</text>
					</navigator>
				</view>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item ">
				<view class="icon-wrapper ">
					<navigator class="nav" url="/pages/yijian/yj" open-type="navigate" hover-class="none">
						<image class="" src="/images/jy.png" mode="scaleToFill"></image>
						<text>菜单555</text>
					</navigator>
				</view>
			</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item ">
				<view class="icon-wrapper ">
					<navigator class="nav" url="/pages/baoxiu/bx" open-type="navigate" hover-class="none">
						<image class="" src="/images/bx.png" mode="scaleToFill"></image>
						<text>菜单666</text>
					</navigator>
				</view>
			</view>
		</swiper-item>


	</swiper>
 <view class="modelDots"> 
        <view class="mdDot {{1 == mddotSwiper ? ' active' : ''}}"></view> 
        <view class="mdDot {{0 == mddotSwiper ? ' active' : ''}}"></view> 
      </view> 
</view>
<!--头部导航结束 -->

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
    })
  },

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