微信小程序_组件基础

Posted Cynical丶Gary

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序_组件基础相关的知识,希望对你有一定的参考价值。

 

 

(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\'
    ]
  },

 

  

 

以上是关于微信小程序_组件基础的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序代码片段

微信小程序_组件基础

微信小程序视图层WXML_模板

微信小程序_组件

微信小程序自定义组件详解

微信小程序 MinUI 组件库系列之 icon 图标组件