微信小程序首頁界面布局、頁面簡潔，功能簡單

直接上具體代碼：
1、js代碼

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  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': '純屬示例數(shù)據(jù)呦~',
        'date': '2023年1月23日',
        'brand': '點贊',
        'price': '2.98'
      },
      {
        'coverUrl': '../../images/demo.jpg',
        'label': '經(jīng)典',
        'title': '點贊收藏加關(guān)注，下次還能找到呦~',
        'date': '2023年1月23日',
        'brand': '收藏',
        'price': '1.98'
      },
      {
        'coverUrl': '../../images/demo.jpg',
        'label': '模板',
        'title': '不定期發(fā)布各種示例模板，進我主頁，查看更多示例內(nèi)容呦~',
        'date': '2023年1月23日',
        'brand': '關(guān)注',
        '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>
<!-- 列表數(shù)據(jù) -->
<view class="box">
  <view class="list-title">示例數(shù)據(jù)</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": "首頁簡潔布局示例"
}

界面中包含的圖片地址可自行修改。頁面布局簡潔，功能簡單，沒有寫具體的監(jiān)聽事件，只是簡單的將監(jiān)聽進行了綁定，如需要具體的監(jiān)聽功能事件，需要根據(jù)自己的需求進行修改呦，如需更多示例，進我主頁呦~，如需沒有合適的demo，請留言，有空就發(fā)。寫的不好，請多包涵。文章來源地址http://www.zghlxwxcb.cn/news/detail-820254.html

到了這里，關(guān)于微信小程序首頁、界面布局、功能簡潔（示例三）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！