2-----------案例一

1、初始化

2、头部

index.wxss

/**头部布局**/
.header{width:750rpx;height:90rpx;}
.hdcon{display:flex;justify-content:space-between;align-items:center;height:100%;}/**两张图片放在一行**/
.hdcon navigator,.hdcon .kefu{height:50rpx;}
.hdcon image{height:100%;}
.kefu{position:relative;animation:dh linear 1s infinite;}
.kefu .btn{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;}

index.wxml

<view class="header">
  <view class="container hdcon">
    <navigator open-type="switchTab" url="/pages/index/index" class="logo">
      <image mode="heightFix" src="/images/logo.png"></image>
    </navigator>
    <view class="kefu">
      <button class="btn" open-type="contact"></button>
      <image  mode="heightFix" src="/images/xiaoxi.png"></image>
    </view>
  </view>
</view>

3、轮播图

index.wxml

<!--PART TWO-->
<view class="banner">
  <swiper indicator-dots indicator-color="rgba(255,255,255,0.5)"indicator-active-color="#fff" circular autoplay interval="4000">
    <swiper-item><image src="/images/banner1.jpg"></image></swiper-item>
    <swiper-item><image src="/images/banner2.jpg"></image></swiper-item>
    <swiper-item><image src="/images/banner3.jpg"></image></swiper-item>
  </swiper>
</view>

index.wxss

/**PART TWO**/
/**轮播图**/
.banner{width:100%;height:295rpx;/**border:1px solid green;**/}
/**border:1px solid green是加了一个外边框，方便调试，后期可以去掉**/
.banner swiper{height:100%;width:100%;}
.banner image{width:100%;height:295rpx;}

4、