技術標籤：微信

一、實現效果圖

二、實現方法 swiper元件

主要點在於元件中的 display-multiple-items 屬性以及 float: left浮動圖示，下面的指示點是另外加的新樣式

三、事例程式碼

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

以下是滑動元件列印的值，可根據這個值來判斷指示點的顯示