uni-app——icon图标展示

最新推荐文章于 2024-09-23 13:43:46 发布

贝塔贝卡贝

最新推荐文章于 2024-09-23 13:43:46 发布

阅读量1k

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/Kiruthika/article/details/119494931

版权

该博客展示了如何在不同平台（如APP-PLUS、MP-WEIXIN、MP-ALIPAY、MP-BAIDU）上动态适配图标类型。通过在`onLoad`函数中根据平台条件设置不同的`iconType`数组，实现了图标组件的平台差异化显示。示例代码使用了`v-for`循环遍历图标类型，并展示了在不同环境下支持的图标类型。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<view class="item" v-for="(value,index) in iconType" :key="index">
    <icon :type="value" size="26"/>
    <text>{{value}}</text>
</view>

export default {
    data() {
        return {
            iconType: ['success']
        }
    },
    onLoad() {
        // #ifdef APP-PLUS|| MP-WEIXIN
        this.iconType = ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search','clear']
        // #endif
        // #ifdef MP-ALIPAY
        this.iconType = ['info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear', 'success', 'success_no_circle', 'loading']
        // #endif
        // #ifdef MP-BAIDU
        this.iconType = ['success', 'info', 'warn', 'waiting', 'success_no_circle', 'clear', 'search', 'personal', 'setting', 'top', 'close', 'cancel', 'download', 'checkboxSelected', 'radioSelected', 'radioUnselect']
        // #endif
    }
}