Página de inicio del subprograma WeChat, diseño de la interfaz, cuadro de búsqueda superior personalizado (ejemplo 1)
La interfaz específica se muestra en la siguiente figura:
Si necesita los archivos de imagen a los que se hace referencia en la interfaz y más funciones, deslícese hacia abajo para ver el enlace de descarga, puede descargar la versión completa y usar directamente la herramienta para desarrolladores de WeChat para ábralo después de descargarlo. La versión completa tiene funciones más detalladas. . El código de estilo de diseño de la interfaz actual es el siguiente (si hay deficiencias, modifíquelo según las necesidades específicas):
1. código 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. código 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. código 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. Código JSON
{
"usingComponents": {
},
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#fd9f50"
}
Dirección de descarga de la versión completa del ejemplo 1 (incluidos los archivos de imágenes a los que se hace referencia, el control de botones y las funciones personalizadas de la barra de estado superior):
ejemplo 1 de la versión completa