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

布满荆棘的人生 2021-06-26 16:06 634阅读 0赞

1.效果图如下：

![70][]

2.Github 项目源码下载：

[https://github.com/yyzheng1729/wx\_navigation.git][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": "更多"
                    }
                ]
            ]
        },

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

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

5.福利：视频资源分享

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaWRvbmdfeQ_size_16_color_FFFFFF_t_70][]

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

![70 1][]

#          #

[70]: /images/20210626/7873701eb1fe451d8650925f2c9bcbe1.png
[https_github.com_yyzheng1729_wx_navigation.git]: https://github.com/yyzheng1729/wx_navigation.git
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaWRvbmdfeQ_size_16_color_FFFFFF_t_70]: /images/20210626/1d89b74c11fd4452bebd9ed4cc8ea582.png
[70 1]: /images/20210626/d6ad3b67abd44663bde9c0b9bf7bd0b6.png