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

1.效果图如下：

2.Github 项目源码下载：

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

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

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

4.实现思路：

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

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

对象。

    
        
            
                
                {{second.name}}
            
        
    

模拟数据代码：

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": "更多"
                }
            ]
        ]
    },

 

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

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

5.福利：视频资源分享

需要以下微信小程序项目教学视频的，可以关注下面的公众号，回复“小程序”即可获取百度云分享链接！如果失效的话，可以在公众号上面私信我。

更多小程序干货可关注博主的公众号：