微信小程序之首页圆形导航条

1.效果图如下：

2.Github 项目源码下载：

https://github.com/yyzheng1729/wx_navigation.git

3.使用到了小程序的自定义组件 component，如果不会

用组件的话，可以把主要代码复制过去也行。

4.实现思路：

由于是两行导航栏按钮，如果采用到了数组+对象的方

法来实现，每一行就是一个数组，每一个按钮就是一个

对象。

<!-- 双层循环嵌套 -->

<block wx:for="{{info}}" wx:for-index="index" wx:key="{{index}}">
    <view class='box'>
        <block wx:for="{{info[index]}}" wx:for-item="second" wx:for-index="secondindex" wx:key="{{index}}">
            <view class='box-item' bindtap='onJumpTap' data-name='{{second.name}}'>
                <image class='box-item-img' src='{{second.img}}'></image>
                <text class='box-item-text'>{{second.name}}</text>
            </view>
        </block>
    </view>
</block>

模拟数据代码：

data: {
        info:[
            [
                {
                    "img":"/images/1.jpg",
                    "name":"音乐系"
                },
                {
                    "img": "/images/1.jpg",
                    "name": "音乐系"
                },
                {
                    "img": "/images/1.jpg",
                    "name": "音乐系"
                },
                {
                    "img": "/images/1.jpg",
                    "name": "音乐系"
                }
            ],
            [
                {
                    "img": "/images/1.jpg",
                    "name": "音乐系"
                },
                {
                    "img": "/images/1.jpg",
                    "name": "音乐系"
                },
                {
                    "img": "/images/1.jpg",
                    "name": "音乐系"
                },
                {
                    "img": "/images/1.jpg",
                    "name": "更多"
                }
            ]
        ]
    },

总结：实际上没什么好讲的，直接套用就行了，我已经

把代码封装好了。嘻嘻~~~不懂可以留言交流。