小程序首页的轮播图、导航、间隔、入口

index.wxml

<!-- 首页轮播图分区 -->
<view class='slider'>
    <swiper indicator-dots="{{ true }}" autoplay="{{ true }}" interval="2500" duration="400" circular="{{ true }}">
        <swiper-item>
            <image src="https://image.suning.cn/uimg/aps/material/153820445234116791.jpg?from=mobile" width="375" height="150"  mode="aspectFill" />
        </swiper-item>
        <swiper-item>
            <image src="https://image3.suning.cn/uimg/cms/img/153853498201585303.jpg_1242w_610h_80q" width="375" height="150" mode="aspectFill" />
        </swiper-item>
        <swiper-item>
            <image src="https://image.suning.cn/uimg/aps/material/153838522153970426.jpg?from=mobile" width="375" height="150" mode="aspectFill" />
        </swiper-item>
        
    </swiper>
</view>

<!-- 首页导航分区 -->
<view class='index-nav'>
    <navigator class='nav-item'>
        <image src='https://image3.suning.cn/uimg/cms/img/153804504628577288.png?from=mobile'></image>
        <text>美食</text>
    </navigator>
    <navigator class='nav-item'>
        <image src='https://image1.suning.cn/uimg/cms/img/153804507827351388.png?from=mobile'></image>
        <text>美食</text>
    </navigator>
    <navigator class='nav-item'>
        <image src='https://image3.suning.cn/uimg/cms/img/153838666910977641.gif'></image>
        <text>美食</text>
    </navigator>
    <navigator class='nav-item'>
        <image src='https://image5.suning.cn/uimg/cms/img/153804514816040882.png?from=mobile'></image>
        <text>美食</text>
    </navigator>
    <navigator class='nav-item'>
        <image src='https://image3.suning.cn/uimg/cms/img/153804520798724660.png?from=mobile'></image>
        <text>美食</text>
    </navigator>
    <navigator class='nav-item'>
        <image src='https://image1.suning.cn/uimg/cms/img/153804524042080436.png?from=mobile'></image>
        <text>美食</text>
    </navigator>
    <navigator class='nav-item'>
        <image src='https://image1.suning.cn/uimg/cms/img/153804526974755934.png?from=mobile'></image>
        <text>美食</text>
    </navigator>
    <navigator class='nav-item'>
        <image src='https://image2.suning.cn/uimg/cms/img/153804529990764934.png?from=mobile'></image>
        <text>美食</text>
    </navigator>
    <navigator class='nav-item'>
        <image src='https://image5.suning.cn/uimg/cms/img/153804533219056487.png?from=mobile'></image>
        <text>美食</text>
    </navigator>
</view>

<!-- 间隔 -->
<view class='divider'></view>

<!-- 首页入口分区 -->
<view class='index-enter'>
    <navigator class='enter-item'>
      <image src='https://image1.suning.cn/uimg/b2c/qrqm/0000000000000000000102654187_200x200.jpg?ver=2024&from=mobile' mode='aspectFit'></image>
    </navigator>
    <navigator class='enter-item'>
      <image src='https://image1.suning.cn/uimg/b2c/qrqm/0000000000000000000121615083_200x200.jpg?ver=2106&from=mobile' mode='aspectFit'></image>
    </navigator>
</view>

index.wxss

/* 小程序的图片记得设置宽高 */

.slider,
.slider image,
.slider swiper{
  width: 100%;
  height:390rpx;
}
.index-nav{
/* 给当前父元素设置成伸缩盒模式 */
  display: flex;
  /* 设置子元素换行能排列 */
  flex-wrap: wrap;
   /* background-color: #fff */
}
.index-nav .nav-item{
 
  width: 33.333%;
  height: 200rpx;
  /* 给当前父元素设置成伸缩盒模式 */
  display: flex;
  /* 设置垂直排列 */
  flex-direction: column;
  /* 设置主轴居中 */
  justify-content: center;
  /* 设置交叉轴居中 */
  align-items: center;
  box-sizing: border-box;
  /* 微信小程序的字号大小官方推荐使用px */
  font-size: 14px;
  /* 右、底部边框 */
  border-right: 1rpx solid #ccc;
  border-bottom: 1rpx solid #ccc;
}
.index-nav .nav-item:nth-child(3n){
  /* 每隔第三个元素去除边框 */  
  border-right: 0 none;
}
.index-nav image{
  width: 130rpx;
  height: 130rpx;
}

/* 首页入口分区 */
.index-enter{
  display: flex;
  padding: 20rpx 25rpx;
   /* background-color: #fff; */
    /* margin-top: 20rpx; */
}
.index-enter .enter-item{
  width: 50%;
  display: flex;
  justify-content: center;
}
.index-enter image{
  width: 320rpx;
  height: 178rpx;
} 

/* 分区间隔第一种方法 */
/* page{
  background-color: rgba(170, 170, 170, 0.295);
} */

/* 分区间隔第二种方法 功能封装，专门用于做间隔的类*/
.divider{
  height: 20rpx;
  background-color: #f1f1f1;
}

index.js

Page({

})