小程序：uniapp 第三弹(样式，组件，图片)

小程序：uniapp 第三弹(样式，组件，图片)

样式

1. 单位：rpx，750为基础
2. 不能使用 * 选择器
3. page相当于body节点
4. 局部样式会覆盖全局样式
5. uni.scss | uni.less 中定义的变量可以在组件用使用
6. 使用iconfont
   • 路径需改为：~@/static/对应文件夹

组件: 地址

• 1.view

  • 视图容器
  • 类似于传统html中的div，用于包裹各种元素内容
  • 属性
    • hover-class：string | 指定按下去的样式类。hover-class=“none” ，没有点击态效果
    • hover-stop-propagation: boolean | 指定是否阻止本节点的祖先节点出现点击态
    • hover-start-time: number | 按住后多久出现点击态，单位毫秒
    • hover-stay-time: number | 手指松开后点击态保留时间，单位毫秒

• 2. text

  • 文本组件，用于包裹文本内容 | 支持 \n 方式换行

  • 组件内只支持嵌套 | 用 组件编译时会被转换为

  • 除了文本节点以外的其他节点都无法长按选中

  • 属性

    • selectable: boolean | 文本是否可选
    • decode： boolean | 是否解码
      • 可以解析的有:   | < | > | & | ' |   |  
    • space： string | 显示连续空格
      • ensp 中文字符空格一半大小
      • emsp 中文字符空格大小
      • nbsp 根据字体设置的空格大小

• 3. button

  • 常用属性

    • size：按钮的大小

    • type：按钮的样式类型 | primary ，default，warn

    • plain：按钮是否镂空，背景色透明

    • disabled：是否禁用

    • loading：名称前是否带 loading 图标

    • hover-class：string | 指定按钮按下去的样式类。hover-class=“none” ，没有点击态效果

    • hover-stop-propagation: boolean | 指定是否阻止本节点的祖先节点出现点击态

    • hover-start-time: number | 按住后多久出现点击态，单位毫秒

    • hover-stay-time: number | 手指松开后点击态保留时间，单位毫秒

    • form-type：submit 提交表单 | reset 重置表单

    • open-type

      • @error：当使用开放能力时，发生错误的回调 | open-type=“launchApp”
      • @getuserinfo: 用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo
      • @getphonenumber：获取用户手机号回调
      • @opensetting：在打开授权设置页并关闭后回调
      • @launchapp：打开 APP 成功的回调

• 4. image
  

  • 常用属性

    • src: string | 图片资源地址

    • mode: string | 图片裁剪、缩放的模式

      • 缩放

        • scaleToFill：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
          
        • aspectFit： 保持纵横比缩放图片，使图片的长边能完全显示出来
          
        • aspectFill： 保持纵横比缩放图片，只保证图片的短边能完全显示出来
          
        • widthFix： 宽度不变，高度自动变化，保持原图宽高比不变
          
        • heightFix： 高度不变，宽度自动变化，保持原图宽高比不变
          

      • 裁剪

        • top | bottom | left | right
        • center
          
        • top left: 显示图片的左上边区域
          
        • top right: 显示图片的右上边区域
        • bottom left: 显示图片的左下边区域
        • bottom right: 显示图片的右下边区域
          

    • lazy-load: 图片懒加载。只针对page与scroll-view下的image有效

    • fade-show: 图片显示动画效果

    • @error

      • 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: ‘something wrong’}

    • @load

      • 当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:‘图片高度px’, width:‘图片宽度px’}