WeChat applet homepage, interface layout, custom top search box (example 1)
The specific interface is shown in the figure below:
If you need the image files referenced in the interface and more functions, please swipe to the bottom to view the download link, you can download the full version, and directly use the WeChat developer tool to open it after downloading. The full version has more detailed functions. . The layout style code of the current interface is as follows (if there are deficiencies, please modify it according to specific needs):
1. js code:
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 code
<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 code
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 code
{
"usingComponents": {
},
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#fd9f50"
}
Example 1 full version download address (including referenced image files, button monitoring and custom top status bar functions):
full version example 1