微信小程序水平滑动菜单，使用swiper实现

可根据需求添加菜单内容，具体代码：
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（更多功能）