当前阅读教程:Uni-app入门到精通教程 > 6.3.1 icon图标 | |||||||||||||||||||||||||||||||||||||||
阅读(22555525) 收藏 赞(5685) 分享 | |||||||||||||||||||||||||||||||||||||||
上一篇: 6.2.2 swiper滑块视图容器 | 下一篇: 6.3.2 text文本 | ||||||||||||||||||||||||||||||||||||||
6.3.1 icon图标平台差异说明
注意 由于 icon 组件各端表现存在差异,可以通过使用 字体图标 的方式来弥补各端差异。 属性说明
各平台 type 有效值说明:
示例 <view 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 } } 效果如图6-1 和 图6-2 【uniapp参考资料】 (1)uni-app跨平台开发 入门到实战 https://ke.qq.com/course/package/26512 (2)uni-app 完整商城界面设计实战 https://ke.qq.com/course/2381059 (3)基于vue的uniapp商城完整项目源代码 https://ke.qq.com/course/3064977 (4)毕业设计网 (5)小程序编程网 (6)计算机编程网 |
|||||||||||||||||||||||||||||||||||||||
上一篇: 6.2.2 swiper滑块视图容器 | 下一篇: 6.3.2 text文本 |