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

直接上具体代码：
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，请留言，有空就发。写的不好，请多包涵。