微信小程序首页、界面布局、功能简洁（示例三）_小程序开发控制界面代码

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

直接上具体代码：
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,
    })
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

4、json代码

{
  "usingComponents": {},
  "navigationBarTitleText": "首页简洁布局示例"
}
1
2
3
4

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