微信小程序开发，轮播图+9宫格实现(超详细)

1. 功能需求

1、需要和原型图设计稿对应的元素保持一致的样式。

2、顶部是轮播图区域，轮播图需要自定切换图片，图片3张以上即可

3、轮播图下面是9宫格区域，9宫格内容为图片+文字形式呈现，不能是单纯的图片或文字展示

2. 代码实现拖成

1. 创建布局文件

创建一个布局文件 index.wxml，用于显示内容：

<!--index.wxml-->
<navigation-bar title="首页" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">

  <view>
    <!-- 轮播图区域 -->
    <view class="swiper">
      <swiper autoplay="true" indicator-dots="true" indicator-active-color="#f3514f">
        <block wx:for="{{banner}}" wx:key="this">
          <swiper-item>
            <image src="{{item.banner_url}}" mode="aspectFill" />
          </swiper-item>
        </block>
      </swiper>
    </view>
    <!-- 9宫格区域 -->
    <view class="grid-container">
      <block wx:for="{{list}}" wx:key="this">
        <view class="grid-item">
          <image src="{{item.url}}" mode="" />
          <text>{{item.title}}</text>
        </view>
      </block>

    </view>
  </view>

</scroll-view>

2. 编写布局样式文件

创建一个样式文件index.wxcss

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}
.scrollarea {
  flex: 1;
  overflow-y: hidden;
}
swiper{
  height: 360rpx;
}
swiper-item image{
  width: 100%;
  height: 100%;
}

.grid-container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 20rpx;
  background-color: #ffffff;
  padding-bottom: 30rpx;
}

.grid-item{
  display: flex;
  width: 33.333%;
  flex-direction: column;
  margin-top: 30rpx;
  align-items: center;
}

.grid-item image{
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

1. grid-item:宽度为33.333% 表示平分3等份，也就是一行显示3个
2. flex-wrap:表示一行显示不下去就自动换行
3. flex-direction: 表示9宫格布局显示显示方向为水平排列

3. 实现数据交互

创建一index.js文件，设置数据

// index.js
Page({
  data: {
    list: [{
      url: "https://img2.baidu.com/it/u=2522056504,2041424792&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800",
      title: "标题1"
    }, {
      url: "https://img2.baidu.com/it/u=1404388016,3139235318&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800",
      title: "标题2"
    }, {
      url: "https://img2.baidu.com/it/u=3885308818,643479783&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800",
      title: "标题3"
    }, {
      url: "https://img2.baidu.com/it/u=2484125053,1996671509&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800",
      title: "标题4"
    }, {
      url: "https://img0.baidu.com/it/u=760667598,3708562080&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800",
      title: "标题5"
    }, {
      url: "https://img0.baidu.com/it/u=3036790086,1577544265&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800",
      title: "标题6"
    }, {
      url: "https://img1.baidu.com/it/u=3243152221,875140461&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800",
      title: "标题7"
    }, {
      url: "https://img1.baidu.com/it/u=2300908878,2319958515&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800",
      title: "标题8"
    }, {
      url: "https://img2.baidu.com/it/u=2463139721,353059241&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800",
      title: "标题9"
    }],
    banner: [{
      banner_url: "https://img0.baidu.com/it/u=3117592333,1826562341&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"
    }, {
      banner_url: "https://img2.baidu.com/it/u=265826729,2545884958&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
    }, {
      banner_url: "https://img0.baidu.com/it/u=2389371048,1699171758&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
    }, {
      banner_url: "https://img0.baidu.com/it/u=4003105501,555186180&fm=253&fmt=auto&app=138&f=JPEG?w=542&h=304"
    }, {
      banner_url: "https://img0.baidu.com/it/u=704178938,712262734&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"
    }]
  }

})

3. 实现效果图

4. 关于作者其它项目视频教程介绍

1. Android新闻资讯app实战：https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
2. Androidstudio开发购物商城实战：https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
3. Android开发备忘录记事本实战：https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
4. Androidstudio底部导航栏实现：https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
5. Android使用TabLayout+ViewPager2实现左右滑动切换：https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8