码迷,mamicode.com
首页 > 微信 > 详细

微信小程序_组件基础

时间:2018-08-08 13:37:19      阅读:271      评论:0      收藏:0      [点我收藏+]

标签:containe   ogr   min   enter   wait   navig   数据   read   wxs   

 

 

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

 

  

 

微信小程序_组件基础

标签:containe   ogr   min   enter   wait   navig   数据   read   wxs   

原文地址:https://www.cnblogs.com/1138720556Gary/p/9441900.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!