小程序组件介绍-基础内容
其实写了第一篇视图组件后,我就觉得写的什么啊 ,有什么用呢,过了五分钟,我 就想也许这是我自己想偷懒的借口,无论有没有用,先搞出来,混几个浏览次数也是 好的。哈哈
icon(图标)
ps:其实我觉得大家都知道icon是图标的意思;哈哈;
在微信小程序中,关于icon的属性介绍
这就是微信提供的type对应的图标样式。
我们在项目中,往往需要更多的 icon类型,那么怎么在小程序 中使用像阿里巴巴图标呢,请参看这篇文章:
在小程序使用阿里图标;(方便自己的同时,给别人 博客做了宣传);
text(文本)
相当于我们在H5中使用的span标签
<text>我是文本内容</text>
注意的是<text>只能嵌套<text>
rich-text(富文本)
这个官方文档给出的是这样的。
其中:nodes 属性推荐使用 Array 类型,由于组件会将 String 类型转换为 Array 类型,因而性能会有所下降
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
Page({
data: {
nodes: [{
name: 'h1',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}]
},
tap() {
console.log('tap')
}
})
出现的效果是:
node里面的name值可以是你能想到的html标签;
全局支持class和style属性,不支持id属性。通过id选择器修改样式,是没有任何效果的
progress(进度条)
progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />