微信小程序_组件基础

Posted 2020-12-28 Cynical丶Gary

 

 

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