微信小程序_(组件)组件基础
2023-09-14 08:57:05 时间
(progress、text、block)
组件基础效果 官方文档:传送门
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 () {
}
})
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.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;
}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
实现过程
添加进度条
<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'
]
},
相关文章
- 浅谈Oracle RAC(4)– OHAS组件
- 易语言画板组件实现自绘圆形进度条源码
- Vue组件基础知识点
- 学用Hooks写React组件——基础版Select组件
- 【React】学习笔记(二)——组件的生命周期、React脚手架使用
- 分库分表路由组件构建方案V1
- android的四大组件_android sdk是什么
- Vue 组件基础
- SpringCloudAlibaba 微服务组件 Nacos 之配置中心源码深度解析
- 写给后端开发的『vue3』复用组件,跳转传参,CRUD
- 2022年面向前端开发人员的9个最佳UI组件库/框架
- C/C++ Qt 基础通用组件的应用
- [Unity3d基础]使用GirdLayoutGroup组件制作表格
- React入门六: 组件基础练习
- React入门七: 组件通讯
- xxl-job基础组件核心类:JobTriggerPoolHelper(一行一行代码解读)
- 微搭低代码从入门到精通07-基础布局组件
- react 基础之组件篇二——Style in React
- 云原生|红帽OpenShift高级集群安全组件了解
- 【Android 组件化】路由组件 ( 页面跳转参数依赖注入 )
- 微信移动端数据库组件WCDB系列(一)-iOS基础篇
- LeetCode每日一题之817题链表组件
- Spring Cloud Security的核心组件-OAuth2示例
- Redis 应用实践-消息队列-解耦系统组件
- Linux组件开发:实现技术之美(linux组件开发)
- Docker 在安全组件、实时容器迁移方面的进展
- 件Linux系统中基础组件的使用(linux基本组)
- 三种禁用FileSystemObject组件的方法
- 【消息提示组件】,兼容IE6/7&&FF2