wx-icon和progress
基本内容
index.wxml
<!--index.wxml-->
<view class="container">
<!--icon text progress-->
<!--success, success_no_circle, info, warn, waiting, cancel, download, search, clear-->
<!--type 用于定义图标类型,只能是规定范围的类型,除了这些内置图标,其他图标必须通过图片方式使用-->
<icon type="success_no_circle"></icon>
<!-- size 用于指定图标大小 默认是23 单位是px -->
<icon type="info" size="60"></icon>
<!-- color 用于指定图标颜色 取值就是CSS颜色取值 -->
<icon type="info" size="60" color="yellow"></icon>
<!--text类似于HTML中的p标签,但是p标签不能嵌套-->
<!--text主要是为了可以很好的控制页面上的内容-->
<!--text还支持换行-->
<text>这是一
段<text>文本</text>内容</text>
这是一段没有被text包裹的文本
<!-- 显示一个进度条 -->
<!-- show-info 是用来控制是否显示具体数值的的 -->
<progress percent="20" show-info />
<progress percent="50" active />
</view>
index.js
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
这一串在这没有什么用,是创建时自带的,下面这个也是
index.css
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
wx-icon和progress的更多相关文章
- 微信小程序基础之常用控件text、icon、progress、button、navigator
今天展示一下基础控件的学习开发,希望对大家有所帮助,转载请说明~ 首先延续之前的首页界面展示,几个跳转navigator的使用,然后是各功能模块的功能使用 一.text展示 使用按钮,进行文字的添加与 ...
- 小程序开发-基础组件icon/text/progress入门
小程序的基础组件--基础内容 基础内容分为三大组件: 1. icon--图标 index.wxml <view class="group"> <block wx: ...
- wx.Dialog
wx.Dialog A dialog box is a window with a title bar and sometimes a system menu, which can be moved ...
- 玩玩小程序:使用 WebApi 交互打造原生的微信小程序 - 图灵小书架
使用 WebApi 交互打造原生的微信小程序 - 图灵小书架 目录 介绍 源码地址 扫一扫体验 代码分析 其它相关信息(互联网搜集) 介绍 定时抓取图灵社区官网的首页.最热.推荐和最新等栏目的相关图书 ...
- 微信小程序~基础组件
(1)视图容器 名称 功能说明 movable-view 可移动的视图容器,在页面中可以拖拽滑动 cover-image 覆盖在原生组件之上的图片视图 cover-view 覆盖在原生组件之上的文本视 ...
- wxPython中文教程入门实例
这篇文章主要为大家分享下python编程中有关wxPython的中文教程,分享一些wxPython入门实例,有需要的朋友参考下 wxPython中文教程入门实例 wx.Window 是一个基类 ...
- Android布局优化
前言 本篇文章为Android优化的布局部分,该部分应该是Android中很重要的,无论是在自定义控件中,还是在简单的书写布局时,都应该尽量遵循一些优化原则,这样布局的绘制效率才会更高,体验才能更好. ...
- wxPython中添加窗口标题图标
这种添加方法可以避免要将应用程序和图标放在同一个目录,可以实现从模块中读取图标 #用于从module中读取ico,避免了要在程序所在路径附上此ico exeName = win32api.GetMod ...
- wxWidgets帮助文档(1)
IMPLEMENT_APP IMPLEMENT_APP(className) 这是在应用程序中使用类的实现文件的应用程序类wxWidgets动态建筑.你用这个代替Old form: MyApp myA ...
- wxPython中菜单、按钮学习
---恢复内容开始--- wx.Window 是一个基类,许多构件从它继承.包括 wx.Frame 构件.技术上这意味着,我们可以在所有的 子类中使用 wx.Window 的方法.我们这里介绍它的几种 ...
随机推荐
- Python-Re正则表达式库
来源:中国MOOC北京理工大学Python教学团队 链接:https://www.icourse163.org/learn/BIT-1001870001#/learn/content?type=det ...
- 关于vue中的videoPlayer的src视频地址参数动态修改(网上一堆错误方法,被误导很久,自己找到了正确的方法,供大家借鉴)
方法很简单:相信大家的问题应该是改变src的值吧,动态赋值这一步简单.this.playerOptions['sources'][0]['src'] 就是这一步解决提取src问题,主要部分用绿色框起来 ...
- while(cin)?
#include<iostream> #include<utility> using namespace std; int main() { int i; do { cout& ...
- Nginx配置详细解析(全)
一.nginx.conf文件结构 (1)共三部分:由全局块.events块.http块组成.http块又包含http全局块.server块:server块由多个location块组成. (2)一般情况 ...
- iText + Freemarker实现pdf的导出,支持中文、css以及图片,页眉页脚,页眉添加图片
本文为了记录自己的实现过程,具体的实现步骤是参考博文 https://www.cnblogs.com/youzhibing/p/7692366.html 来实现的,只是在他的基础上添加了页眉页脚及页眉 ...
- JSON.parse() 报错和一些解决方法
js 报错 Unexpected end of JSON input,Unexpected token u in JSON at position 0 JSON 通常用于与服务端交换数据. 在接收服务 ...
- 腾讯面试官问我Java中boolean类型占用多少个字节?我说一个,面试官让我回家等通知
本文首发于微信公众号:程序员乔戈里 什么是boolean类型,根据官方文档的描述: boolean: The boolean data type has only two possible value ...
- 《一张图看懂华为云BigData Pro鲲鹏大数据解决方案》
8月27日,华为云重磅发布了业界首个鲲鹏大数据解决方案--BigData Pro.该方案采用基于公有云的存储与计算分离架构,以可无限弹性扩容的鲲鹏算力作为计算资源,以支持原生多协议的OBS对象存储服务 ...
- Linux-Ubuntu学习笔记
因学习Python需求,特开此贴用于记录Linux-Ubuntu操作系统的学习笔记. Linux命令-基础版 Linux命令-高级版 此贴终结了,主要用于开发过程中忘记命令时使用.
- 基于串口通信做my_printf时遇到的坑儿
首先,完成了串口向终端putty的打印函数ConsolePrint(),但该函数只能打印字符串,无法像stdio库中的printf函数一样打印整数和浮点数等. 因此,我先是使用了标准库stdio中的s ...