(progress、text、block)

组件基础效果  官方文档:传送门

Page({

  /**
* 页面的初始数据
*/
data: {
text:"Gary 微信小程序\n",
icons:[
'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
]
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) { }, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function () { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function () { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function () { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function () { }
})

test.js

<view class="contaner">

<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active /> <text>{{text}}</text> <block wx:for="{{icons}}">
<icon type="{{item}}" size="45" ></icon>
</block>
</view>

test.wxml

.container{
height:100%;
display:flex;
flex-direction: colum;
align-items:center;
justify-content:space-between;
padding:200rpx 0;
box-sizing: border-box;
} progress{
margin:10px 0;
}

test.wxss

{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}

app.json

实现过程

  添加进度条

<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />

  show-info:在进度条右侧显示百分比

  stroke-width:进度条线的宽度,单位px

  color:进度条颜色 (请使用 activeColor)

  active:进度条从左往右的动画

  添加文本

 <text>{{text}}</text>

  添加图标

 <block wx:for="{{icons}}">
<icon type="{{item}}" size="45" ></icon>
</block>

  icon的类型,type:success, success_no_circle, info, warn, waiting, cancel, download, search, clear

  Page中添加九个图标和文本文字

  data: {
text:"Gary 微信小程序\n",
icons:[
'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
]
},

  

微信小程序_(组件)组件基础的更多相关文章

  1. 微信小程序_简单组件使用与数据绑定

    简单的数据传值 官方文档:传送门 点击"按钮"测试后,按钮文本改变,下方text文本改变,通过console.log()在输出台中打印按钮文本信息 程序结构 Page({ //页面 ...

  2. 原创:WeZRender:微信小程序Canvas增强组件

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...

  3. 微信小程序之swiper组件高度自适应

    微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...

  4. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  5. 微信小程序基于swiper组件的tab切换

    代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  6. 关于微信小程序前端Canvas组件教程

    关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 ​ 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...

  7. uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

    uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...

  8. 微信小程序校历组件

    微信小程序校历组件 校历组件,可以作为校园小程序的插件,如果觉得不错,点个star吧

  9. 微信小程序内置组件web-view的缓存问题探讨

    前言:博客或者论坛上面,还有自习亲身经历,发现微信小程序的webview组件的页面缓存问题相当严重,对开发H5的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探 ...

  10. 微信小程序--页面与组件之间如何进行信息传递和函数调用

    微信小程序--页面与组件之间如何进行信息传递和函数调用 ​ 这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如何调 ...

随机推荐

  1. Java设计模式七种写法

    懒汉模式-线程不安全 public class Singleton { private static Singleton instance; private Singleton (){ } publi ...

  2. python网络爬虫(9)构建基础爬虫思路

    目的意义 基础爬虫分5个模块,使用多个文件相互配合,实现一个相对完善的数据爬取方案,便于以后更完善的爬虫做准备. 这里目的是爬取200条百度百科信息,并生成一个html文件,存储爬取的站点,词条,解释 ...

  3. Python 并发网络库

    Python 并发网络库 Tornado VS Gevent VS Asyncio Tornado:并发网络库,同时也是一个 web 微框架 Gevent:绿色线程(greenlet)实现并发,猴子补 ...

  4. volatile关键字和transient关键字

    Java 语言包含两种内在的同步机制:同步块(或方法)和 volatile 变量 1.volatile 关键字-----针对变量的可变性 专业解释:volatile关键字是个类型修饰符用它声明的类型变 ...

  5. es6编译器(babel搭建)

    1.安装Node.js,初始化项目 npm init -y 2.安装babel-cli(兼容至ie7) npm i @babel/core @babel/cli @babel/preset-env - ...

  6. golang利用beego框架orm操作mysql

    GO引入orm框架操作mysql 在beego框架中引入orm操作mysql需要进行的步骤: 第一步:导入orm框架依赖,导入mysql数据库的驱动依赖 import ( "github.c ...

  7. 05 Django之模型层---单表操作

    一 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这极大的减轻了开发人 ...

  8. 本人亲测-C#常用工具类

    /* * HTTP接口工具类 */ public class HttpUitls { /* * get请求 */ public static string Get(string Url) { //Sy ...

  9. Visual Studio (VC) Win32 程序由于数据大,内存溢出怎么办?

    Visual Studio (VC) 内编写的Win32 程序由于数据大,内存溢出,即使转移到64位系统也不行.在国外网站上找到了答案. 原来,只需在project->property中的Lin ...

  10. spring-boot 启动图标修改-启动彩蛋

    spring boot启动总会显示这样的图标,但是我想不一样 到网上找了一圈,恩,找到一个不错的,做个记录 首先我们在resource目录下面放入一个banner.txt文件,Spring Boot启 ...