微信小程序----button组件

最新推荐文章于 2024-06-02 19:06:18 发布
最新推荐文章于 2024-06-02 19:06:18 发布
阅读量597 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liNewman/article/details/86576733
版权
这篇博客详细介绍了微信小程序中的button组件，包括展示效果图、常用属性如size、type、plain、disabled和loading的解释，以及WXML、WXSS和JS的相关应用。同时还提供了DEMO下载和相关学习资源链接。
摘要由CSDN通过智能技术生成

微信小程序----button组件

DEMO下载

展示效果图

button组件效果图

button组件的常用属性

  1. size：default、mini—-default为块级按钮、mini为小按钮
  2. type：primary、default、warn—-primary提交成功、default默认灰色、warn警告色
  3. plain：true、false—-按钮是否镂空，背景色透明
  4. disabled：true、false—-是否禁用
  5. loading：true、false—-名称前是否带 loading 图标

WXML

<view class="tui-btn-group">
  <view class="tui-btn-content">
    <button size="{
      {
      defaultSize}}" bindtap="default" hover-class="other-button-hover"> default </button>
  </view>
  <view class="tui-btn-content">
    <button type="primary"
最低0.47元/天 解锁文章
liNewman
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序的语法学习1——icon,text,button,input；注册页面
糖哲睿的博客
04-21 264
Icon,text,input的使用 1.icon.wxml <icon type="success"></icon> <!--绿色对勾--> <icon type="info"></icon> <!--蓝色i--> <icon type="warn"></icon> <!--红色！--&g...
微信小程序-自定义子组件-按钮组
驚鴻入梦
04-26 1830
由于项目需要，频繁使用到按钮组，如图所示，后期优化代码时，提炼出了自定义的子组件。 效果如下图： 父组件： <!--button-group/button-group.wxml--> <view class="btn-group-wrap"> <view wx:for="{{dataList}}" wx:for-item="item" wx:for-inde...
小程序中Button组件属性和用法
最新发布
bananananana_123的博客
06-02 1532
简要介绍Button组件在小程序中的作用和重要性，以及为什么开发者需要深入了解其属性值和用法。size：设置按钮尺寸大小。type：设置按钮样式类型。plain：设置按钮是否镂空。disabled：设置按钮是否禁用。open-type：设置按钮的开放能力。hover-class：设置按钮按下后的样式类。form-type：设置按钮在表单中的功能类型。lang：设置开放能力的语言类型。hover-stop-propagation：设置是否阻止事件冒泡。
微信小程序勾选按钮.rar
02-04
微信小程序勾选按钮
微信小程序如何解决botton按钮对齐问题
w708955424的博客
01-25 880
在微信小程序开发过程中，botton按钮是一个非常基础和常用的UI组件，因此解决botton按钮对齐问题也是非常重要的。但是，在实际开发过程中，我们经常会遇到botton按钮对齐问题，即多个botton按钮之间的位置不够整齐。因此，在解决botton按钮对齐问题时，一定要进行充分的测试，以确保在不同版本的微信客户端上都能够正常运行。在微信小程序中，不同屏幕尺寸的设备上，botton按钮的大小和位置可能存在差异。b. 在WXML文件中，将需要对齐的botton按钮放入该容器中，并设置其宽度为百分比单位。
微信小程序把玩（十四）button组件
FUCK
09-25 3万+
button按钮用的算是最普遍的组件之一。主要属性：wxml<!--按钮默认样式，点击事件--> <button type="defaule" bindtap="clickButton">Defalut</button><!--原始颜色，不可点击状态， 正在加载状态--> <button type="primary" disabled="true" loading="true">Primary</b
微信小程序 ---- 组件应用和实际开发的DEMO
01-09
本主题聚焦于微信小程序的组件应用与实际开发，通过一系列DEMO来深入理解其核心功能和开发流程。 1. **组件基础**：微信小程序的组件类似于HTML中的标签，但提供了更为丰富的功能和交互性。常见的组件包括视图容器...
微信小程序-组件练习
03-15
在这个“微信小程序-组件练习”中，我们可以深入学习和实践微信小程序的各种组件功能。 首先，微信小程序的组件是其核心特性之一，它们是预先定义好的UI元素，开发者可以通过简单的配置和组合来构建应用程序的界面...
微信小程序-自定义组件-遮罩层
05-05
在微信小程序开发中，自定义组件是提升代码复用性和模块化的重要手段。遮罩层，也称为蒙层，是一种常见的UI元素，用于在页面上创建半透明的覆盖层，通常用于显示弹窗、加载提示或者进行用户交互时提供背景效果。在此...
微信小程序-微信小程序-新闻客户端
08-06
微信小程序提供了一些原生组件，如image（图片）、text（文本）、view（视图容器）、navigator（导航）、button（按钮）等。新闻客户端通常会用到view、text、image和navigator来展示新闻标题、内容、图片和跳转...
微信小程序-绘制图片并分享下载（painter）
04-09
5. **下载功能**：微信小程序目前不直接支持图片下载，但可以通过跳转至一个预览页面，并利用`<button>`组件的`open-type="saveFile"`属性，让用户手动保存图片到本地。需要注意的是，要确保图片的URL是持久化的，...
微信小程序button组件使用详解
08-28
主要为大家详细介绍了微信小程序button组件的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序按钮Button使用详解
代码小疯子
12-03 2万+
微信小程序 按钮 button
微信小程序----手势锁详解
止于至善
03-05 7663
设计思路流程图 1、全局常量 constructor(page,opts){ // 初始化全局常量数据 this.page = page; this.width = opts.width || 300; this.height = opts.height || 300; this.canvasId = opts.canvasId || 'lock'; t...
微信小程序学习(10)-button控件
sinat_36772813的博客
11-28 6万+
button控件学习 1.button属性 2.size和type属性对button的影响 size属性的默认值为default，type属性的默认值也为default，如果值为default时，该属性可以省略； size属性为default size属性为mini size属性为default size属性为mini
JavaScript中的this指向和自定义属性
weixin_44978043的博客
09-06 318
1.this关键字 this指向的是当前元素 全局函数中的this指向window对象 代码中声明了一个全局函数，是属于浏览器窗口对象的，所以this表示的就是浏览器窗口对象window function fn() { consolo.log(this); } fn() 标签事件属性中的this指向window对象 如果将一个全局函数在一个标签属性中调用，如下： <button onclick="fn()">点我试试</button> function fn() {
微信小程序(2) 按钮点击跳转页面
热门推荐
萧墨的博客
03-26 12万+
微信小程序中，按钮也是<button></button>标签，它通过bindtap属性绑定点击事件： 然后在js里面注册这个回调函数： 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', })跳转到talkPage界面。 注意，html界面要在app.json里面注册： 不注册的话会报错：n...
微信小程序之授权登录的实现（button按钮）
woqianduo的博客
08-03 9万+
前言：由于微信官方修改了 getUserInfo、authorize 接口，无法弹出授权窗口，所以现在无法实现一进入微信小程序就弹出授权窗口，只能通过 button 去触发 1.实现思路 微信授权登录仅适用于使用微信用户信息的用户，如果自己的项目有完善的用户信息（一套式开发项目），可不使用微信用户信息；如果仅为微信小程序，则要授权、获取用户信息 自己写一个微信授权登录页面让用户实...
微信小程序 scroll-into-view
03-15
微信小程序的scroll-into-view是一个用于实现滚动到指定位置的功能。通过设置scroll-into-view属性，可以将页面滚动到指定的组件或元素位置。 具体来说，当我们在小程序中需要将页面滚动到某个特定的组件或元素位置时，可以给目标组件或元素设置一个唯一的id，并将该id作为scroll-into-view属性的值。当触发滚动操作时，小程序会自动将页面滚动到该id所对应的组件或元素位置。 以下是使用scroll-into-view的示例代码： 在wxml文件中： ```html <view id="target">我是目标位置</view> <button bindtap="scrollToTarget">滚动到目标位置</button> ``` 在js文件中： ```javascript Page({ scrollToTarget: function() { this.setData({ scrollIntoView: 'target' }) } }) ``` 在上述代码中，我们给目标位置的view设置了一个id为"target"，并在按钮的点击事件中通过setData方法将scrollIntoView属性设置为"target"。当点击按钮时，页面会自动滚动到id为"target"的view所在的位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值