小程序icon组件详细介绍

 

<!--成功图标-->

<icon type="success" size="40"/>

<!--安全成功标志图标-->

<icon type="safe_success" size="40"/>

<!--提示信息图标-->

<icon type="info" size="40"/>

<!--带圆的信息提示图标-->

<icon type="info_circle" size="40"/>

<!--不带圆的成功图标-->

<icon type="success_no_circle" size="40"/>

<!--带圆的成功图标-->

<icon type="success_circle" size="40"/>

<!--警告图标-->

<icon type="warn" size="40"/>

<!--带圆的等待图标-->

<icon type="waiting_circle" size="40"/>

<!--等待图标-->

<icon type="waiting" size="40"/>

<!--下载图标-->

<icon type="download" size="40"/>

<!--取消图标-->

<icon type="cancel" size="40"/>

<!--清除图标-->

<icon type="clear" size="40"/>

<!--改变颜色的success-->

<icon type="success" size="40" color="red"/>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Uniapp 小程序中,可以通过使用自定义导航栏来实现 TabBar 加 Icon 的效果。以下是一个简单的示例: 1. 在 `App.vue` 文件中,添加一个 `tabBar` 字段,用于定义底部 TabBar 的样式和内容: ```html <template> <div> <!-- 其他页面内容 --> <tab-bar :selected="selected" :list="tabBarList"></tab-bar> </div> </template> <script> import tabBar from '@/components/tabBar.vue' export default { components: { tabBar }, data() { return { tabBarList: [ { iconPath: '/static/tabbar/home.png', selectedIconPath: '/static/tabbar/home-active.png', text: '首页', pagePath: '/pages/index/index' }, { iconPath: '/static/tabbar/category.png', selectedIconPath: '/static/tabbar/category-active.png', text: '分类', pagePath: '/pages/category/category' }, // 添加更多的 TabBar 项 ], selected: 0 // 初始选中的 TabBar 项索引 } } } </script> ``` 2. 创建一个 `tabBar.vue` 组件,用于显示底部 TabBar 的内容: ```html <template> <div class="tab-bar"> <div v-for="(item, index) in list" :key="index" class="tab-bar-item" @click="changeTab(index)"> <img :src="selected === index ? item.selectedIconPath : item.iconPath" alt=""> <p :class="{ 'text-selected': selected === index }">{{ item.text }}</p> </div> </div> </template> <script> export default { props: { selected: { type: Number, default: 0 }, list: { type: Array, default: () => [] } }, methods: { changeTab(index) { if (index !== this.selected) { this.selected = index // 切换页面 uni.switchTab({ url: this.list[index].pagePath }) } } } } </script> <style scoped> .tab-bar { display: flex; justify-content: space-around; align-items: center; height: 50px; background-color: #f5f5f5; border-top: 1px solid #ddd; } .tab-bar-item { display: flex; flex-direction: column; align-items: center; } .tab-bar-item img { width: 24px; height: 24px; } .text-selected { color: #07c160; } </style> ``` 3. 在 `static` 目录下创建 `tabbar` 文件夹,并将对应的 TabBar 图标放入其中。 这样,就可以通过切换选项卡来改变页面,并在选中的选项卡上显示对应的图标和文本。你可以根据需要自定义 TabBar 的样式和图标。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值