微信小程序_(组件)组件基础
(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'
]
},
微信小程序_(组件)组件基础的更多相关文章
- 微信小程序_简单组件使用与数据绑定
简单的数据传值 官方文档:传送门 点击"按钮"测试后,按钮文本改变,下方text文本改变,通过console.log()在输出台中打印按钮文本信息 程序结构 Page({ //页面 ...
- 原创:WeZRender:微信小程序Canvas增强组件
WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...
- 微信小程序之swiper组件高度自适应
微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...
- 微信小程序中的组件使用1
不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...
- 微信小程序基于swiper组件的tab切换
代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 关于微信小程序前端Canvas组件教程
关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...
- uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤
uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...
- 微信小程序校历组件
微信小程序校历组件 校历组件,可以作为校园小程序的插件,如果觉得不错,点个star吧
- 微信小程序内置组件web-view的缓存问题探讨
前言:博客或者论坛上面,还有自习亲身经历,发现微信小程序的webview组件的页面缓存问题相当严重,对开发H5的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探 ...
- 微信小程序--页面与组件之间如何进行信息传递和函数调用
微信小程序--页面与组件之间如何进行信息传递和函数调用 这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如何调 ...
随机推荐
- redis 学习(9)-- redis 客户端 -- redis-py
redis 客户端 -- redis-py 简介 关于 redis 的各种客户端,我们可以在官网上寻找并使用,比如我这里的 python 客户端,可以在官网上找到:redis-client . 获取 ...
- 命名空间System.IO
基本介绍:System.IO 命名空间提供读写文件和数据流的类型.基本文件和目录支持的类型. 原文:http://blog.sina.com.cn/s/blog_48a45b950100erhz.ht ...
- 关于NGINX在wnidows下面和linux下面的多站点的反向代理的配置
原创文章,转载注明出处 nginx作为一款优秀的反向代理软件,以其好用,易于搭建负载均衡的网站集群而著称,这里分别记录一下工作中用到nginx作为负载以及多站点发布的时候一些配置和注意事项 一 ng ...
- 微信小程序swiper使用网络图片不显示问题
@ wxml代码: <view class="container"> <swiper indicator-dots="true}" autop ...
- shell脚本中的数组
以下命令,都是以数组array=("20150417" "20150416" "20150415")为例. 注意bash中只支持一维数组,没 ...
- shell判断文件,目录是否存在或者具有权限
shell判断文件,目录是否存在或者具有权限 #!/bin/sh myPath="/var/log/httpd/" myFile="/var /log/httpd/ ...
- HashMap并发分析
我们听过并发情况下的HashMap,会出现成环的情况,现在,我就来总结一下它成环的过程. 一言以蔽之,就是他在resize的时候,会改变元素的next指针. 之前在一篇博客里提到,HashMap的re ...
- 外网访问VMware(Centos7.0,NAT模式)搭建的web服务器应用
首先参考 https://www.cnblogs.com/studyhard-cq/p/11551755.html 设置好NAT模式,能访问公网. 1.打开VMware,点击左上角编辑 ...
- 垃圾回收gc --翻译
原文在https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management.基本保持了平译,并在一些地方做了概念解释.(转 ...
- python file对象测试数据的读写操作及OS模块介绍(四)
import from....import 引入模块 引入类 ①import 如果文件在lib下而且是python模块 :import 模块名. ②from....import from 包名.包 ...