Wechat アプレットの水平スライド メニュー、スワイパーを使用して実現
メニューのコンテンツは要件に応じて追加できます。特定のコード:
1.js コード
// pages/level/index.js
Page({
/**
* 页面的初始数据
*/
data: {
navIndex: 0,
viewHeight: 640, // 默认高度
navList: [
[
[{
id: '1',
path: 'pages/path/index', // 具体需要跳转至该界面的路径
title: '功能一'
},
{
id: '2',
path: 'pages/path/index',
title: '功能二'
},
{
id: '3',
path: 'pages/path/index',
title: '功能三'
},
{
id: '4',
path: 'pages/path/index',
title: '功能四'
}
],
[{
id: '5',
path: 'pages/path/index',
title: '功能五'
},
{
id: '6',
path: 'pages/path/index',
title: '功能六'
},
{
id: '7',
path: 'pages/path/index',
title: '功能七'
},
{
id: '8',
path: 'pages/path/index',
title: '功能八'
},
]
],
[
[{
id: '9',
path: 'pages/path/index',
title: '功能A'
},
{
id: '10',
path: 'pages/path/index',
title: '功能B'
},
{
id: '11',
path: 'pages/path/index',
title: '功能C'
},
{
id: '12',
path: 'pages/path/index',
title: '功能D'
}
],
[{
id: '9',
path: 'pages/path/index',
title: '功能A'
},
{
id: '10',
path: 'pages/path/index',
title: '功能B'
}
],
]
],
},
// 滑动监听
moduleSelect(e) {
this.setData({
navIndex: e.detail.current
})
},
// 功能菜单监听
navClick(e) {
var info = e.currentTarget.dataset.item;
wx.showToast({
title: '您点击了' + info.title,
icon: 'none'
})
wx.navigateTo({
url: info.path,
})
console.log('需要跳转的路径地址：', info.path)
},
/**
* 生命周期函数--监听页面加载
*/
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="swiper-box">
<swiper hcircular="true" bindchange="moduleSelect" style="height: {
{
viewHeight*0.26}}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 bindtap="navClick" data-item="{
{item}}" class="nav">
<icon type="info" size="36"></icon>
<text class="nav-text">{
{item.title}}</text>
</view>
</block>
</view>
</block>
</swiper-item>
</block>
</swiper>
<view class="lab" wx:if="{
{navList.length>1}}">
<block wx:for="{
{navList}}" wx:key="*this">
<label class="{
{navIndex==index?'active-yes':'active-no'}}"></label>
</block>
</view>
</view>
3.wxssコード
page {
background-color: #f1f1f1;
}
.swiper-box {
background-color: white;
margin: 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: 25%;
padding-top: 25rpx;
}
.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: #2979ff;
width: 25rpx;
border-radius: 45rpx;
}
.active-no {
width: 12rpx;
border-radius: 50rpx;
background-color: gray;
}
その他の機能については、次のリンクを入力してその他の機能を表示できます:
http://t.csdn.cn/316d5 (その他の機能)