组件

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

现在订阅年付会员多送 6 个月,重订、续订多送 12 个月(最后 2 天)。订阅 →

小程序的框架里面提供了一些组件 .. 我们可以利用这些组件去构建小程序页面的界面 .. 这些组件就像是 html 里的标签 .. 之前我们已经用过了 view 组件,还有 text 组件 ..

view 组件是个包装组件,text 组件用来显示文字内容 .. 如果组件里面需要包装其它的内容,这种组件一般都有个开始标记,还有个结束标记 .. 结束标记里面会带一个斜线 .. 这开始还有结束标签之间可以添加一些内容 .. 比如在这个 view 组件里面,再嵌套一个 text 组件 ..

在这个 text 组件里面,可以添加要显示的文字 ..

属性

小程序的组件上面有一些共同的属性 .. 比如 id .. 可以给组件添加一个唯一的标识 .. class 可以在组件上定义类 .. 你可以在样式文件里去设计这些类的样式 ..

style 属性可以在组件上添加内联的样式 .. 这些都跟 html 差不多 .. 不一样的是,你可以在这些属性上面绑定动态的数据 .. 两组花括号 .. 里面可以添加绑定的数据 .. 你还可以在这里去做一些运算 .. 根据运算的结果来决定属性的值 ..

在组件上你还可以使用 data 开头的自定义属性 .. data 后面有个小横线,小横线右边的东西就是自定义属性的名字 .. 这些自定义属性的值会包含在组件的事件对象里 ..

组件上面还可以添加一些 bind 开头的事件绑定 .. 比如在这个组件上绑定一个 tap 事件,可以添加一个 bindtap .. 它的值是对应的事件处理方法 .. 在页面的主逻辑里面,你可以去定义这个方法具体要做的事情 ..

想要隐藏组件,你可以添加一个 hidden 属性 .. 给它绑定一个 true ... 这样组件的内容就会被隐藏 .. 如果你不想渲染组件,你可以使用 wx:if .. 只想简单的隐藏内容,就用这个 hidden .. 给它一个 false ... 组件又会显示出来 ..

自关闭标签

组件也可以是自关闭的 .. 比如小程序里有个 icon 组件,可以用来显示小程序里内置的一些小图标 ..

添加一个 icon .. 它可以是一个自关闭的组件 .. 就是不需要结束标签 .. 直接在这个标签的结尾添加一个斜线 .. 组件上除了可以使用组件共用的一些属性以外 ... 不同的组件可能会有一些自己特有的属性 ..

比如这个 icon 组件上面,可以用一个 type 属性,它的值就是小图标的类型 .. 或者叫小图标的名字 .. 具体可以使用的值需要参考这个 icon 组件的文档 .. 比如我们给它一个 success .. 显示的是一个表示成功的小图标 ..

info ... 表示信息 ...

这个 icon 组件上还有个 color 属性,可以设置小图标的颜色 ... 添加一个 color .. 给它一个颜色的值 ..

我们还可以使用 icon 的 size 属性去设置小图标的大小 .. 默认的大小是 23 .. 这里我们把它设置成 40 ..

0:00
0:00
2:23
0:00
3:54
0:00
1:46

组件《 微信小程序:视图 》

统计

11346
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点