WeChat アプレットのホームページ、インターフェイス レイアウト、カスタムのトップ検索ボックス (例 1)
具体的なインターフェイスを次の図に示します。
インターフェイスで参照されている画像ファイルやその他の機能が必要な場合は、下にスワイプしてダウンロード リンクを表示し、フル バージョンをダウンロードして、WeChat 開発者ツールを直接使用して、ダウンロード後、開いてください。製品版では、より詳細な機能が利用できます。現在のインターフェイスのレイアウト スタイル コードは次のとおりです (不備がある場合は、特定のニーズに応じて変更してください)。
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コード
{
"usingComponents": {
},
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#fd9f50"
}
例 1 フル バージョンのダウンロード アドレス (参照画像ファイル、ボタン監視、カスタム トップ ステータス バー機能を含む):
フル バージョンの例 1