【微信小程序】button和image组件的基本使用

✅作者简介：CSDN内容合伙人、阿里云专家博主、51CTO专家博主🏆
📃个人主页：hacker707的csdn博客
🔥系列专栏：微信小程序🥇
💬个人格言：不断的翻越一座又一座的高山，那样的人生才是我想要的。这一马平川，一眼见底的活，我不想要,我的人生，我自己书写，余生很长，请多关照，我的人生，敬请期待💖💖💖

其他常用组件

①button

按钮组件
功能比HTML中的button按钮丰富

②image

图片组件
image组件默认宽度约300px、高度约240px

③navigator

页面导航组件
类似于HTML中的a链接

button按钮的基本使用

✅通过type属性指定按钮颜色类型

<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
1
2
3

✅size=“mini” 小尺寸按钮

<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
1
2
3

✅plain 镂空按钮

<button size="mini" plain>普通按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮 </button>
1
2
3

image组件的基本使用

✅使用src 指向图片路径

<image src="/images/秦霄贤.png"></image>
1

image组件的mode属性

image组件的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性值如下：

✅使用实例：

<image src="/images/秦霄贤.png" mode="aspectFit"></image>
1

<image src="/images/秦霄贤.png" mode="aspectFill"></image>
1

<image src="/images/秦霄贤.png" mode="widthFix"></image>
1

<image src="/images/秦霄贤.png" mode="heightFix"></image>
1

结束语🥇

以上就是微信小程序之button和image组件的基本使用
持续更新微信小程序教程，欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是hacker创作的动力💖💖💖