首页 > 其他分享 >P11_组件-button和image组件的基本用法

P11_组件-button和image组件的基本用法

时间:2023-01-08 17:33:34浏览次数:42  
标签:主色调 button P11 mode 按钮 组件 image

  1. 其它常用组件
    1. button
      • 按钮组件
      • 功能比 HTML 中的 button 按钮丰富
      • 通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
    2. image
      • 图片组件
      • image 组件默认宽度约 300px、高度约 240px
    3. navigator(后面课程会专门讲解)
      • 页面导航组件
      • 类似于 HTML 中的 a 链接
  2. button 按钮的基本使用
    图片详情

text.wxml

<!--pages/text/text.wxml-->
<view>~~~~通过 type 指定按钮类型~~~~~</view>
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">告警按钮</button>

<view>size="mini" 小尺寸按钮~</view>
<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">告警按钮</button>

<view>plain 镂空按钮~</view>
<button size="mini" plain>默认按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>告警按钮</button>

  1. image 组件的基本使用
    图片详情
  2. image 组件的 mode 属性
    image 组件的 mode 属性用来指定图片的裁剪和缩放模式,常用的 mode 属性值如下:
    图片详情

image.wxml

<!--pages/image/image.wxml-->
<image></image>
<image src="/images/1-tuya.png" mode="aspectFit"></image>

image.wxss

/* pages/image/image.wxss */
image {

border: 1px solid red;

}

标签:主色调,button,P11,mode,按钮,组件,image
From: https://www.cnblogs.com/xiaopengmvp520/p/p11zu-jianbutton-heimage-zu-jian-de-ji-ben-yong-f

相关文章