微信小程序_(组件)组件基础
2024-09-03 02:44:17
(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'
]
},
最新文章
- centos6.3与jexus5.4.4配置支持php（wordpress）
- 设置bundle包中的默认语言
- Codeigniter文件上传类型不匹配错误
- java中BigDecimal加减乘除基本用法
- Android SQLiteOpenHelper(二)
- SVN服务器搭建和使用（三）（转载）
- jackson反序列化时忽略不需要的字段(zhuan)
- uc/os任务创建
- NUnit单元测试
- OAuth2.0授权和SSO授权
- Centos6.5最小化安装：配置网络和自启动服务
- PC-常见问题-清除浮动
- DW 图片不显示的情况 ———网页只显示字不显示图片的情况 目录下的图片名被改动不显示图片的情况
- R语言学习之主成分分析法的R实践
- VS2012编译LibZip库
- java线程之生产者消费者
- jenkins2 -pipeline 常用groovy脚本
- 高质量PHP代码的50个实用技巧必备（下）
- xss挖掘初上手
- termios结构体的内容