微信小程序-基础内容组件
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 />
微信小程序-基础内容组件的更多相关文章
- 微信小程序基础之开源项目库汇总
awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. (链接:ht ...
- 微信小程序基础
前言 什么是微信小程序,它是一种轻量级的APP,它与常规App来说,无需下载安装即可使用,它嵌于微信App中,要使用微信小程序你只需要搜索一下微信小程序的名称就好,如近期的"Google的画 ...
- 微信小程序基于swiper组件的tab切换
代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序内置组件web-view的缓存问题探讨
前言:博客或者论坛上面,还有自习亲身经历,发现微信小程序的webview组件的页面缓存问题相当严重,对开发H5的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探 ...
- 微信小程序--页面与组件之间如何进行信息传递和函数调用
微信小程序--页面与组件之间如何进行信息传递和函数调用 这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如何调 ...
- 原创:WeZRender:微信小程序Canvas增强组件
WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...
- 微信小程序之swiper组件高度自适应
微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...
- 微信小程序中的组件使用1
不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...
- 关于微信小程序前端Canvas组件教程
关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...
随机推荐
- 在centos6.7用yum安装redis解决办法
1. centos默认的安装源在官方centos.org上,而Redis在第三方的yum源里,所以无法安装,非官方的yum推荐用fedora的epel仓库 [root@localhost instal ...
- magento安装
最近在做一个Magento 1.7.0.2的站,在安装环节Magento一直报错Database server does not support the InnoDB storage engine. ...
- 对点餐APP现阶段开发的问题
团队的成立,基本是一气呵成.但是,github团队的建立却成为 第一个难题,大家对github都不熟,又刚刚好没课时间的任务,大家 已经各有安排,造成时间上的紧急.没有按时.按要求完成github的 ...
- matlab中patch函数的用法
http://blog.sina.com.cn/s/blog_707b64550100z1nz.html matlab中patch函数的用法——emily (2011-11-18 17:20:33) ...
- HDU 5053 the Sum of Cube(简单数论)
http://acm.hdu.edu.cn/showproblem.php?pid=5053 题目大意: 求出A^3+(A+1)^3+(A+2)^3+...+B^3和是多少 解题思路: 设f(n)=1 ...
- Android 广播 BroadcastReceiver
Android 系统里定义了各种各样的广播,如电池的使用状态,电话的接收和短信的接收,开机启动都会产生一个广播.当然用户也可以自定义自己的广播. 既然说到广播,那么必定有一个广播发送者,以及广播接收器 ...
- Google Code Jam Round 1A 2015 解题报告
题目链接:https://code.google.com/codejam/contest/4224486/ Problem A. Mushroom Monster 这题题意就是,有N个时间点,每个时间 ...
- 在macbook上搭建ubuntu工作环境
工作环境需要:ubuntu12.04.gcc 4.4.7.vim.source insight.git. 1. 制作启动盘 首先需要制作一个能从苹果电脑启动的ubuntu启动盘: 在苹果电脑的终端中输 ...
- 夺命雷公狗-----React_native---1---jdk的安装
目录结构如下 然后打开安装包 这样大致上都算是完成了,那么我们要在cmd窗口里面对她进行测试下... 比如用命令看下版本 java -version 然后开始配置环境变量: 然后创建一个"J ...
- 商品条形码(JBarcode)
之前没有使用过这个,现在使用JBarcode生成商品条形码,工作之前的准备工作: Eclipse:Eclipse Java EE IDE for Web Developers.Version: Hel ...