【微信小程序】表单组件button、form与switch，媒体组件image、导航navigator

最新推荐文章于 2025-03-14 16:27:58 发布

浅默淡殇450

最新推荐文章于 2025-03-14 16:27:58 发布

阅读量808

点赞数

分类专栏：微信小程序文章标签：微信小程序 html css 小程序

本文链接：https://blog.youkuaiyun.com/weixin_56296642/article/details/125522829

版权

本文介绍了微信小程序中的表单组件，包括button的form-type属性和form组件的使用，以及switch组件的详细说明。同时，探讨了媒体组件image的各种模式，并解决了图片加载问题。还涉及到了navigator导航组件的长按效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单组件

1.button
在这里插入图片描述
// 在list3.wxml中


```javascript
// <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 plain>普通按钮</button>
<button type="primary" plain>主按钮</button>
<button type="warn" plain>警告按钮</button>
<view>..............</view>
<button type="warn" loading>加载中</button>
<button disabled>登录</button>
<button type="primary" disabled="{
  {false}}">登录</button>
<button open-type="contact">客服对话</button>

效果如下：
在这里插入图片描述
当点击客服对话时，需要真机调试，效果为：

在button组件中有个form-type属性用于客户提交信息，需要结合form组件。具体案例看后面。

2.form

//在wxml中

// 
<button type="warn" loading>加载中</button>
<button disabled>登录</button>
<button type="primary" disabled="{
   {false}}">登录</button>
<button open-type="contact">客服对话</button>
<form bindsubmit="onsubmit">
<button form-type="submit">提交</button>
</form>

效果如图:

最低0.47元/天解锁文章