微信小程序首页界面布局、页面简洁，功能简单

直接上具体代码：
1、js代码

Page({  /**   * 页面的初始数据   */  data: {    imgList: ['../../images/demo.jpg', '../../images/demo.jpg', '../../images/demo.jpg'],    navList: [{        'src': '../../images/nav1.png',        'title': '菜单一'      },      {        'src': '../../images/nav2.png',        'title': '菜单二'      },      {        'src': '../../images/nav3.png',        'title': '菜单三'      },      {        'src': '../../images/nav4.png',        'title': '菜单四'      },    ],    dataList: [{        'coverUrl': '../../images/demo.jpg',        'label': '推荐',        'title': '纯属示例数据呦~',        'date': '2023年1月23日',        'brand': '点赞',        'price': '2.98'      },      {        'coverUrl': '../../images/demo.jpg',        'label': '经典',        'title': '点赞收藏加关注，下次还能找到呦~',        'date': '2023年1月23日',        'brand': '收藏',        'price': '1.98'      },      {        'coverUrl': '../../images/demo.jpg',        'label': '模板',        'title': '不定期发布各种示例模板，进我主页，查看更多示例内容呦~',        'date': '2023年1月23日',        'brand': '关注',        'price': '0.98'      },    ]  },  // 菜单  navClick(e) {    wx.showToast({      title: '您点击了【' + e.currentTarget.dataset.item.title + '】',    })  },  // 详情  detailClick(e) {    wx.showToast({      title: e.currentTarget.dataset.item.title,    })  },})

2、wxml代码

<!-- 轮播图 --><swiper class="margin" indicator-dots="true" autoplay="true" interval="2000" duration="500" indicator-color="gray" indicator-active-color="white">  <block wx:for="{{imgList}}" wx:for-index="index" wx:for-item="item" wx:key="item">    <swiper-item>      <image src="{{item}}" mode="widthFix"></image>    </swiper-item>  </block></swiper><!-- 菜单栏 --><view class="nav-box">  <block wx:for="{{navList}}" wx:for-index="index" wx:for-item="item" wx:key="item">    <view class="nav" bind:tap="navClick" data-item="{{item}}">      <image src="{{item.src}}" mode="widthFix"></image>      <text>{{item.title}}</text>    </view>  </block></view><!-- 列表数据 --><view class="box">  <view class="list-title">示例数据</view>  <scroll-view scroll-y="true" show-scrollbar="{{false}}" enhanced="{{true}}">    <block wx:for="{{dataList}}" wx:for-index="index" wx:for-item="item" wx:key="item">      <view class="level row" bind:tap="detailClick" data-item="{{item}}">        <view class="left-img">          <image src="{{item.coverUrl}}"></image>        </view>        <view class="right-info">          <view>            <view class="right-title">              <text class="car-dot">{{item.label}}</text>{{item.title}}            </view>            <view class="right-gray">{{item.date}}</view>          </view>          <view class="level right-bot">            <view>{{item.brand}}</view>            <view>{{item.price}} 元</view>          </view>        </view>      </view>    </block>    <view class="no-more">我是有底线的呦~</view>  </scroll-view></view>

3、wxss代码

page {  background-color: #f1f1f1;}/* 轮播图 */.margin {  margin: 20rpx;}swiper-item {  border-radius: 20rpx;}swiper-item image {  width: 100%;}/* 菜单栏 */.nav-box {  display: flex;  flex-direction: row;  align-items: center;  margin: 20rpx 0;}.nav {  display: flex;  flex-direction: column;  align-items: center;  flex: 1;}.nav image {  width: 40%;  background-color: white;  border-radius: 20rpx;  padding: 15rpx;}.nav text {  margin-top: 15rpx;  font-size: 30rpx;}/* 列表信息 */.box {  margin: 20rpx;}.list-title {  margin: 0 10rpx;  font-size: 30rpx;  font-weight: bold;}.level {  display: flex;  flex-direction: row;}.row {  margin-top: 20rpx;  background-color: #fff;  padding: 10rpx;  border-radius: 10rpx;  min-height: 200rpx;}.left-img {  width: 45%;}.left-img image {  width: 100%;  border-radius: 5rpx;  max-height: 200rpx;}.right-info {  width: 55%;  display: flex;  padding-left: 15rpx;  flex-direction: column;  justify-content: space-between;}.right-title {  font-size: 30rpx;  display: -webkit-box;  word-break: break-all;  text-overflow: ellipsis;  overflow: hidden;  -webkit-box-orient: vertical;  -webkit-line-clamp: 2;}.right-gray {  font-size: 28rpx;  color: #909399;  margin-top: 5rpx;  display: -webkit-box;  word-break: break-all;  text-overflow: ellipsis;  overflow: hidden;  -webkit-box-orient: vertical;  -webkit-line-clamp: 1;}.car-dot {  font-size: 20rpx;  background-color: #f29100;  margin-right: 10rpx;  padding: 2rpx 5rpx;  color: white;}.right-bot {  align-items: center;  justify-content: space-between;}.right-bot view:nth-child(1) {  font-size: 28rpx;}.right-bot view:nth-child(2) {  color: #fa3534;  font-size: 30rpx;  font-weight: bold;}.no-more {  text-align: center;  padding: 20rpx 0;  font-size: 26rpx;  color: #909399;}

4、json代码

{  "usingComponents": {},  "navigationBarTitleText": "首页简洁布局示例"}

界面中包含的图片地址可自行修改。页面布局简洁，功能简单，没有写具体的监听事件，只是简单的将监听进行了绑定，如需要具体的监听功能事件，需要根据自己的需求进行修改呦，如需更多示例，进我主页呦~，如需没有合适的demo，请留言，有空就发。写的不好，请多包涵。