zoukankan      html  css  js  c++  java
  • wx-icon和progress

    基本内容

    index.wxml

    <!--index.wxml-->
    <view class="container">
      <!--icon text progress-->
      <!--success, success_no_circle, info, warn, waiting, cancel, download, search, clear-->
      <!--type 用于定义图标类型,只能是规定范围的类型,除了这些内置图标,其他图标必须通过图片方式使用-->
      <icon type="success_no_circle"></icon>
      <!-- size 用于指定图标大小 默认是23 单位是px -->
      <icon type="info" size="60"></icon>
      <!-- color 用于指定图标颜色 取值就是CSS颜色取值 -->
      <icon type="info" size="60" color="yellow"></icon>
    
      <!--text类似于HTML中的p标签,但是p标签不能嵌套-->
      <!--text主要是为了可以很好的控制页面上的内容-->
      <!--text还支持换行-->
      <text>这是一
      段<text>文本</text>内容</text>
    
      这是一段没有被text包裹的文本
    
    <!-- 显示一个进度条 -->
    <!-- show-info 是用来控制是否显示具体数值的的 -->
      <progress percent="20" show-info />
    
      <progress percent="50" active />
    </view>
    
    

    index.js

    //index.js
    //获取应用实例
    var app = getApp()
    Page({
      data: {
        motto: 'Hello World',
        userInfo: {}
      },
      //事件处理函数
      bindViewTap: function() {
        wx.navigateTo({
          url: '../logs/logs'
        })
      },
      onLoad: function () {
        console.log('onLoad')
        var that = this
        //调用应用实例的方法获取全局数据
        app.getUserInfo(function(userInfo){
          //更新数据
          that.setData({
            userInfo:userInfo
          })
        })
      }
    })
    
    

    这一串在这没有什么用,是创建时自带的,下面这个也是
    index.css

    /**index.wxss**/
    .userinfo {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .userinfo-avatar {
       128rpx;
      height: 128rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
    
    .userinfo-nickname {
      color: #aaa;
    }
    
    .usermotto {
      margin-top: 200px;
    }
    
  • 相关阅读:
    使用yield实现一个协成
    串讲-Python基础练习
    Linux练习
    列表生成式
    Jupyter Notebook的快捷键帮助文档
    mysql字段类型
    爬取12306火车票信息
    【Lodop】02 C-Lodop手册阅读上手
    【Lodop】01 Lodop手册阅读上手
    【Redis】06 事务
  • 原文地址:https://www.cnblogs.com/ygjzs/p/12045383.html
Copyright © 2011-2022 走看看