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代码

{{item.title}}

示例数据

{{item.label}}{{item.title}}

{{item.date}}

{{item.brand}}

{{item.price}} 元

我是有底线的呦~

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，请留言，有空就发。写的不好，请多包涵。

精彩文章