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

最新推荐文章于 2024-09-07 10:09:00 发布

程序东

最新推荐文章于 2024-09-07 10:09:00 发布

阅读量5k

点赞数 4

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weidong_y/article/details/80727284

版权

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'