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、