微信小程序首页、界面布局、自定义顶部搜索框（示例一）
具体界面见下图：
如需界面中引用的图片文件和更多功能，请滑动至底部查看下载链接，可下载完整版，下载后直接使用微信开发者工具打开即可，完整版功能更详细呦。当前界面的布局样式代码如下（如存在不足之处，请根据具体需求，自行修改）：
1、js代码：
Page({
/**
* 页面的初始数据
*/
data: {
viewHeight: 640, // 默认高度
navIndex: 0,
tabList: [{
id: '1',
src: '../../images/select.png',
title: '菜单一'
},
{
id: '2',
src: '../../images/sort.png',
title: '菜单二'
},
{
id: '3',
src: '../../images/select.png',
title: '菜单三'
},
{
id: '4',
src: '../../images/sort.png',
title: '菜单四'
}
],
navList: [
[
[{
id: '1',
path: 'pages/path1/index', // 具体需要跳转至该界面的路径
img: '../../images/msg.png',
title: '功能一'
},
{
id: '2',
path: 'pages/path2/index',
img: '../../images/set.png',
title: '功能二'
},
{
id: '3',
path: 'pages/path3/index',
img: '../../images/msg.png',
title: '功能三'
},
{
id: '4',
path: 'pages/path4/index',
img: '../../images/set.png',
title: '功能四'
}
],
[{
id: '5',
path: 'pages/path5/index',
img: '../../images/msg.png',
title: '功能五'
},
{
id: '6',
path: 'pages/path6/index',
img: '../../images/set.png',
title: '功能六'
},
{
id: '7',
path: 'pages/path7/index',
img: '../../images/msg.png',
title: '功能七'
},
{
id: '8',
path: 'pages/path8/index',
img: '../../images/set.png',
title: '功能八'
},
]
],
[
[{
id: '9',
path: 'pages/path9/index',
img: '../../images/set.png',
title: '功能A'
},
{
id: '10',
path: 'pages/path10/index',
img: '../../images/msg.png',
title: '功能B'
},
{
id: '11',
path: 'pages/path11/index',
img: '../../images/set.png',
title: '功能C'
},
{
id: '12',
path: 'pages/path12/index',
img: '../../images/msg.png',
title: '功能D'
}
],
]
],
articleList: [{
content: '本创作分享给需要的用户使用，如存在不足之处，欢迎留言指正。',
src: '../../images/money.jpeg',
url: 'http://t.csdn.cn/316d5'
},
{
content: '点赞，收藏加关注，后续将编写更多示例，同大家分享。',
src: '../../images/money.jpeg',
url: 'http://t.csdn.cn/316d5'
},
{
content: '点赞，收藏加关注，后续出更完成版示例，同大家分享。',
src: '../../images/money.jpeg',
url: 'http://t.csdn.cn/316d5'
},
]
},
// 滑动监听
moduleSelect(e){
this.setData({
navIndex:e.detail.current
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
var that = this;
wx.getSystemInfo({
success(res) {
that.setData({
viewHeight:res.windowHeight
})
}
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
2、wxml代码
<view class="bg-box">
<!-- 搜索 -->
<view class="level search-box">
<image class="col-1" style="width: 10%;" src="../../images/scan-code.png" mode="widthFix"></image>
<view class="level col-2">
<icon class="icon-small" type="search" size="20"></icon>
<input placeholder="输入关键字" class="input-text" />
</view>
<image class="col-1" src="../../images/service.png" mode="widthFix"></image>
<image class="col-1" src="../../images/message.png" mode="widthFix"></image>
</view>
<!-- 二级菜单 -->
<view class="level tab-box">
<block wx:for="{{tabList}}" wx:for-index="index" wx:for-item="item" wx:key="item">
<view class="tab-list">
<image class="tab-img" src="{{item.src}}" mode="widthFix"></image>
<view class="tab-text">{{item.title}}</view>
</view>
</block>
</view>
<!-- 功能菜单 -->
<view class="swiper-box">
<swiper hcircular='true' bindchange='moduleSelect' style="height: {{viewHeight*0.29}}px;" current="{{navIndex}}">
<block wx:for="{{navList}}" wx:key='navRow' wx:for-item="navRow">
<swiper-item>
<block wx:for="{{navRow}}" wx:key='navItem' wx:for-item="navItem">
<view class="nav-list">
<block wx:for="{{navItem}}" wx:key='item'>
<view data-item="{{item}}" class="nav">
<image src="{{item.img}}" mode="widthFix"></image>
<text class="nav-text">{{item.title}}</text>
</view>
</block>
</view>
</block>
</swiper-item>
</block>
</swiper>
<view class="lab">
<block wx:for="{{navList}}" wx:key="*this">
<label class="{{navIndex==index?'active-yes':'active-no'}}"></label>
</block>
</view>
</view>
</view>
<view class="tip-box level">
<view class="tip-title">示例</view>
<view class="tip-info">记得点赞、收藏加关注哦，以免找不到了哦，谢谢</view>
</view>
<view class="model-box">
<view class="model-text">更多demo，请关注我，持续更新中！</view>
</view>
<!-- 科普文章 -->
<view class="article-box">
<view class="level">
<view class="line"></view>
<view class="title">科普文章</view>
</view>
<block wx:for="{{articleList}}" wx:for-index="index" wx:for-item="item" wx:key="item">
<view class="article-list">
<view class="row-left">{{item.content}}</view>
<view class="row-right">
<image src="{{item.src}}" class="row-img" mode="widthFix"></image>
</view>
</view>
</block>
</view>
3、wxss代码
page {
background-color: #f1f1f1;
}
.bg-box {
background-image: linear-gradient(to bottom, #fd9f50, #f6c79d, #f1f1f1);
}
/* 搜索 */
.search-box {
padding: 20rpx 0;
}
.col-1 {
width: 8%;
text-align: center;
padding: 0 20rpx;
}
.col-2 {
width: 70%;
padding: 15rpx 10rpx;
border-radius: 10rpx;
background-color: white;
}
.input-text {
font-size: 30rpx;
padding-left: 10rpx;
}
/* 二级菜单 */
.tab-box {
margin: 5% 0;
}
.tab-list {
flex: 1;
text-align: center;
color: white;
}
.tab-img {
width: 50%;
}
.tab-text {
font-size: 30rpx;
margin: 5rpx 0;
}
/* 功能菜单 */
.swiper-box {
background-color: white;
margin: 0 20rpx;
border-radius: 5rpx;
padding-top: 20rpx;
}
.nav-list {
display: flex;
flex-direction: row;
align-items: center;
}
.nav {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
padding-top: 25rpx;
}
.nav image {
width: 45%;
}
.nav-text {
padding-top: 10rpx;
font-size: 26rpx;
color: gray;
}
.lab {
display: flex;
justify-content: center;
padding-bottom: 20rpx;
}
.lab label {
margin: 0 6rpx;
height: 12rpx;
}
.active-yes {
background-color: #fd9f50;
width: 25rpx;
border-radius: 45rpx;
}
.active-no {
width: 12rpx;
border-radius: 50rpx;
background-color: gray;
}
.tip-box {
background-color: white;
margin: 20rpx;
border-radius: 5rpx;
font-size: 30rpx;
padding: 20rpx;
}
.tip-title {
padding: 0 15rpx;
width: 12%;
border-right: 1rpx solid #f1f1f1;
}
.tip-info {
padding: 0 15rpx;
color: gray;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.model-box {
margin: 20rpx;
border-top-left-radius: 50rpx;
border-bottom-right-radius: 50rpx;
background-color: #fcdabd;
padding: 30rpx;
}
.model-text {
font-size: 30rpx;
color: rgb(53, 53, 53);
}
/* 科普文章 */
.article-box {
margin: 20rpx;
}
.line {
width: 10rpx;
height: 34rpx;
border-radius: 50rpx;
background-color: orange;
}
.title {
margin-left: 15rpx;
font-size: 30rpx;
font-weight: bold;
}
.article-list {
margin: 20rpx 0;
padding: 20rpx;
background-color: white;
font-size: 30rpx;
border-radius: 5rpx;
display: flex;
}
.row-left {
width: 60%;
line-height: 45rpx;
color: rgb(54, 54, 54);
}
.row-right {
width: 40%;
text-align: center;
}
.row-img {
width: 70%;
}
4、json代码文章来源：https://www.toymoban.com/news/detail-527574.html
{
"usingComponents": {},
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#fd9f50"
}
示例一完整版下载地址（包含引用的图片文件、按钮监听和自定义顶部状态栏功能）：
完整版示例一文章来源地址https://www.toymoban.com/news/detail-527574.html
到了这里，关于微信小程序首页、界面布局、自定义顶部（示例一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
