在微信小程序中的导航栏写图标,代码
时间: 2024-03-19 15:43:54 浏览: 80
在微信小程序中的导航栏中使用图标,可以使用 `icon` 属性来设置。以下是一个示例:
```xml
<view class="nav">
<view class="nav-item">
<navigator url="/pages/index/index" open-type="switchTab" active-class="active">
<icon type="home" size="24" />
<text>首页</text>
</navigator>
</view>
<view class="nav-item">
<navigator url="/pages/cart/cart" open-type="switchTab" active-class="active">
<icon type="cart" size="24" />
<text>购物车</text>
</navigator>
</view>
<view class="nav-item">
<navigator url="/pages/user/user" open-type="switchTab" active-class="active">
<icon type="user" size="24" />
<text>我的</text>
</navigator>
</view>
</view>
```
在上面的代码中,我们使用了 `<icon>` 标签来设置图标,它的 `type` 属性指定了该图标的类型,`size` 属性指定了图标的大小。
我们将每个导航项都放在一个 `<navigator>` 标签中,它的 `url` 属性指定了该导航项点击后跳转的页面路径,`open-type` 属性指定了打开方式,这里使用了 `switchTab` 来在底部导航栏中切换选项卡,`active-class` 属性指定了该导航项被选中时的样式类名。
最后,我们使用了 `<text>` 标签来设置导航项的文本内容。
阅读全文