微信小程序-基础内容组件
2016-11-11 15:40
661 查看
icon 图标
示例:
<view class="group"> <block wx:for="{{iconSize}}"> <icon type="success" size="{{item}}"/> </block> </view> <view class="group"> <block wx:for="{{iconType}}"> <icon type="{{item}}" size="45"/> </block> </view> <view class="group"> <block wx:for="{{iconColor}}"> <icon type="success" size="45" color="{{item}}"/> </block> </view>
Page({ data: { iconSize: [20, 30, 40, 50, 60, 70], iconColor: [ 'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple' ], iconType: [ 'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn', 'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download', 'info_circle', 'cancel', 'search', 'clear' ] } })
text 文本
支持转义符"\"。<text/>组件内只支持
<text/>嵌套。
除了文本节点以外的其他节点都无法长按选中。
示例:
<view class="btn-area"> <view class="body-view"> <text>{{text}}</text> <button bindtap="add">add line</button> <button bindtap="remove">remove line</button> </view> </view>
var initData = 'this is first line\nthis is second line' var extraLine = []; Page({ data: { text: initData }, add: function(e) { extraLine.push('other line') this.setData({ text: initData + '\n' + extraLine.join('\n') }) }, remove: function(e) { if (extraLine.length > 0) { extraLine.pop() this.setData({ text: initData + '\n' + extraLine.join('\n') }) } } })
progress 进度条
<progress percent="20" show-info /> <progress percent="40" stroke-width="12" /> <progress percent="60" color="pink" /> <progress percent="80" active />
相关文章推荐
- 【微信小程序笔记-4】组件-基础内容(icon、text、progress)
- 用微信小程序开店之六——小程序组件2:“基础内容”
- 微信小程序基础内容的三个组件
- 「微信小程序免费辅导教程」26,基础内容组件rich-text体验
- 「微信小程序免费辅导教程」24,基础内容组件icon的使用探索与7月26日微信公众平台的更新解读
- 小程序六:组件之基础内容
- 2.2.1微信小程序内容组件图标 icon
- 微信小程序2---基础内容
- 微信小程序 基础组件与导航组件详细介绍
- 2.2.3微信小程序内容组件 进度条:progress
- 微信小程序 wxapp内容组件 text详细介绍
- 2.微信小程序 基础组件概述
- 「微信小程序免费辅导教程」25,基本内容组件text的使用及个人帐号允许的服务类目
- EA&UML日拱一卒-0基础学习微信小程序(6)- 配置文件的形式和内容
- 2017/7/19小程序基础类库更新,Map组件又可以在微信开发者工具中使用了
- 2.2.2微信小程序内容组件 text(文本)
- 微信小程序基础组件之视图容器
- 微信小程序 wxapp内容组件 progress详细介绍
- 微信小程序 wxapp内容组件 icon详细介绍