微信小程序_(组件)icon、text、rich-text、progress四大基础组件
微信小程序基础组件官方文档 传送门
Learn
一、icon图标组件
二、rich-text富文本组件
三、text文本组件
四、progress进度条组件
一、icon图标组件
type:icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size:icon的大小,单位px(2.4.0起支持rpx)【默认值23px】
color:icon的颜色,同css的color
<!--index.wxml-->
<icon type="success" ></icon>
<icon type="clear" ></icon>
<icon type="success" size="40" ></icon>
<icon type="success" size="66" color='blue'></icon>
<!-- 外边的圈没有了 -->
<icon type="success_no_circle" size="66" color='blue'></icon>
index.html
二、text文本组件
selectable:文本是否可选【默认值为false】
space:显示连续空格【默认值为false】【目前版本是有问题的】
<!--index.wxml-->
<view>
<text>普通的 text文本 内容</text>
</view> <view>
<text selectable='{{true}}'>可选的 text文本 内容</text>
</view> <view>
<text space='{{true}}'>space 空格 space </text>
</view>
index.wxml
三、rich-text富文本
nodes:节点列表 / HTML String【默认值为[]】
显示富文本编辑框的两种显示
第一种方式
mycontent1:'<img class="shizhan-course-img" alt="SpringBoot" src="//img.mukewang.com/szimg/5ae4172200010b8f05400300-360-202.jpg">'
第二种方式
mycontent2:[
{
name:"img",
attrs:{
class:"shizhan-course-img",
src:"//img.mukewang.com/szimg/5ae4172200010b8f05400300-360-202.jpg"
}
}
]
<!--index.wxml-->
<rich-text nodes="{{mycontent2}}">
</rich-text>
index.wxml
Page({
data:{
//第一种方式
mycontent1:'<img class="shizhan-course-img" alt="SpringBoot" src="//img.mukewang.com/szimg/5ae4172200010b8f05400300-360-202.jpg">',
//第二种方式
mycontent2:[
{
name:"img",
attrs:{
class:"shizhan-course-img",
src:"//img.mukewang.com/szimg/5ae4172200010b8f05400300-360-202.jpg"
}
}
] }
})
index.js
四、progress进度条组件
percent:百分比0~100
show-info:在进度条右侧显示百分比【默认值为false】
stroke-width:进度条线的宽度,单位px(2.4.0起支持rpx)【默认值为6】
activeColor:已选择的进度条的颜色
backgroundColor:未选择的进度条的颜色
active:进度条从左往右的动画【默认值为false】
bindactiveend:动画完成事件
<!--index.wxml-->
<progress percent='35'
show-info='{{true}}'
stroke-width="10"
activeColor="red"
backgroundColor="green"
active="{{true}}"
bindactiveend="bindactiveended"
></progress>
index.wxml
Page({
data:{
},
bindactiveended:function(){
console.log("动画完成事件啦!");
}
})
index.js
微信小程序_(组件)icon、text、rich-text、progress四大基础组件的更多相关文章
- 微信小程序把玩(十二)text组件
原文:微信小程序把玩(十二)text组件 通常文本设置要不在wxml中设置,再要不就是通过weml绑定在js中设置文字. wxml <view > <text>我是文本组件&l ...
- 微信小程序_(校园视)开发视频的展示页_上
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序_(校园视)开发视频的展示页_下
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序_(校园视)开发上传视频业务
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序_(校园视)开发用户注册登陆
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序_(组件)组件基础
(progress.text.block) 组件基础效果 官方文档:传送门 Page({ /** * 页面的初始数据 */ data: { text:"Gary 微信小程序\n", ...
- 微信小程序_(组件)canvas画布
canvas画布效果 官方文档:传送门 Page({ canvasIdErrorCallback: function (e) { console.error(e.detail.errMsg) }, o ...
- 微信小程序_简单组件使用与数据绑定
简单的数据传值 官方文档:传送门 点击"按钮"测试后,按钮文本改变,下方text文本改变,通过console.log()在输出台中打印按钮文本信息 程序结构 Page({ //页面 ...
- 微信小程序_(表单组件)checkbox与label
微信小程序组件checkbox官方文档 传送门 微信小程序组件label官方文档 传送门 Learn 一.checkbox组件 二.label组件与checkbox组件共用 一.checkbox组件 ...
随机推荐
- 实现Banner广告图片轮换
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 支付宝小程序室内地图导航开发-支付宝小程序JS加载esmap地图
如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章 一.在支付宝小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-vi ...
- vue中使用proxy配置不同端口和ip接口
问题描述: 使用vue-cli创建的项目,开发地址是localhost:8080,由于后台开发不同的模块,导致每个模块请求的ip和端口号不一致 例如:http://192.168.10.22:8081 ...
- Docker安装&java-Zookeeper进行操作
Docker安装Zookeeper下载Zookeeper镜像 docker pull zookeeper 启动容器并添加映射 docker run --privileged=: -d zookeepe ...
- [yii\queue\Queue] [10] unknown job (attempt: 1, PID: 31167) is finished with error: yii\base\ErrorException: unserialize(): Error at offset 1922 of 65535 bytes
网上的解决方案: 1. 报错场景:序列化字段中有中文,反序列化时有可能会出现报错. 错误原因:写入和取出数据库的时候,编码不同,中文符号长度不同,序列化中的长度就无法匹配. 解决办法:适合 php 5 ...
- SQLServer 主键插入
设置此命令后可以往主键插入值 set IDENTITY_INSERT 表名 on set IDENTITY_INSERT 表名 off 注意: 此语句是一个整体操作 反例: 先单步执行:set IDE ...
- 第十章、json和pickle模块
目录 第十章.json和pickle模块 一.序列化 二.json 三.pickle模块 第十章.json和pickle模块 一.序列化 把对象(变量)从内存中变成可存储或传输的过程称之为序列化, 序 ...
- Ubuntu18.04安装 NVIDIA驱动
Ubuntu18.04安装 NVIDIA驱动 参考自博客:https://blog.csdn.net/jsjason1/article/details/88086904 我确定这篇文章是否很有必要,我 ...
- Python:用filter函数求素数 (再理解generator)
目的:更熟悉应用generator. 参考:https://www.liaoxuefeng.com/wiki/1016959663602400/1017404530360000 素数定义: 素数:质数 ...
- 块格式化上下文(Block Formatting Context,BFC)
块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. 下列方式会创建块格 ...