微信小程序首頁、界面布局、自定義頂部搜索框（示例一）
具體界面見下圖：
如需界面中引用的圖片文件和更多功能，請滑動至底部查看下載鏈接，可下載完整版，下載后直接使用微信開發(fā)者工具打開即可，完整版功能更詳細呦。當前界面的布局樣式代碼如下（如存在不足之處，請根據(jù)具體需求，自行修改）：
1、js代碼：
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
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', // 具體需要跳轉(zhuǎn)至該界面的路徑
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: '本創(chuàng)作分享給需要的用戶使用，如存在不足之處，歡迎留言指正。',
src: '../../images/money.jpeg',
url: 'http://t.csdn.cn/316d5'
},
{
content: '點贊，收藏加關(guān)注，后續(xù)將編寫更多示例，同大家分享。',
src: '../../images/money.jpeg',
url: 'http://t.csdn.cn/316d5'
},
{
content: '點贊，收藏加關(guān)注，后續(xù)出更完成版示例，同大家分享。',
src: '../../images/money.jpeg',
url: 'http://t.csdn.cn/316d5'
},
]
},
// 滑動監(jiān)聽
moduleSelect(e){
this.setData({
navIndex:e.detail.current
})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad(options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady() {
var that = this;
wx.getSystemInfo({
success(res) {
that.setData({
viewHeight:res.windowHeight
})
}
})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide() {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload() {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh() {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
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="輸入關(guān)鍵字" 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">記得點贊、收藏加關(guān)注哦，以免找不到了哦，謝謝</view>
</view>
<view class="model-box">
<view class="model-text">更多demo，請關(guān)注我，持續(xù)更新中！</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代碼文章來源：http://www.zghlxwxcb.cn/news/detail-527574.html
{
"usingComponents": {},
"navigationBarTitleText": "首頁",
"navigationBarBackgroundColor": "#fd9f50"
}
示例一完整版下載地址（包含引用的圖片文件、按鈕監(jiān)聽和自定義頂部狀態(tài)欄功能）：
完整版示例一文章來源地址http://www.zghlxwxcb.cn/news/detail-527574.html
到了這里，關(guān)于微信小程序首頁、界面布局、自定義頂部（示例一）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
