微信小程序首页、界面布局、功能简洁（示例三）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序首页、界面布局、功能简洁（示例三）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

微信小程序首页、界面布局、功能简洁（示例三）,微信小程序,微信小程序,javascript,小程序
直接上具体代码：
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，请留言，有空就发。写的不好，请多包涵。文章来源地址https://www.toymoban.com/news/detail-820254.html

到了这里，关于微信小程序首页、界面布局、功能简洁（示例三）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！