微信小程序中 button 组件的详细使用介绍方法

why 86 2024-08-26

这篇文章主要为大家详细介绍了微信小程序button组件的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文为大家分享了微信小程序button组件的使用方法，供大家参考，具体内容如下

展示效果图

button组件效果图

button组件的常用属性

  • size：default、mini—-default为块级按钮、mini为小按钮

  • type：primary、default、warn—-primary提交成功、default默认灰色、warn警告色

  • plain：true、false—-按钮是否镂空，背景色透明

  • disabled：true、false—-是否禁用

  • loading：true、false—-名称前是否带 loading 图标

WXML


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<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" size="{{primarySize}}" bindtap="primary"> primary </button>

 </view>

 <view class="tui-btn-content">

  <button type="warn" size="{{warnSize}}" bindtap="warn"> warn </button>

 </view>

 <view class="tui-btn-content">

  <button bindtap="setDisabled" disabled="{{disabled}}" type="primary">点击设置按钮disabled属性true</button>

 </view>

 <view class="tui-btn-content">

  <button bindtap="setPlain" plain="{{plain}}">点击设置按钮plain属性</button>

 </view>

 <view class="tui-btn-content">

  <button bindtap="setLoading" loading="{{loading}}" type="warn">点击设置按钮loading属性</button>

 </view>

</view>


WXSS


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

.tui-btn-group{

 padding: 10px;

}

.tui-btn-content{

 height: 60px;

 line-height: 60px;

}

/** 修改button默认的点击态样式类**/

.button-hover {

 background-color: red;

}

/** 添加自定义button点击态样式类**/

.other-button-hover {

 background-color: blue;

}


JS


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

var types = [&#39;default&#39;, &#39;primary&#39;, &#39;warn&#39;]

var pageObject = {

 data: {

  defaultSize: &#39;default&#39;,

  primarySize: &#39;default&#39;,

  warnSize: &#39;default&#39;,

  disabled: false,

  plain: false,

  loading: false

 },

 setDisabled: function (e) {

  this.setData({

   disabled: !this.data.disabled

  })

 },

 setPlain: function (e) {

  this.setData({

   plain: !this.data.plain

  })

 },

 setLoading: function (e) {

  this.setData({

   loading: !this.data.loading

  })

 }

}

 

//循环给&#39;default&#39;, &#39;primary&#39;, &#39;warn&#39;按钮创建函数

for (var i = 0; i < types.length; ++i) {

 (function (type) {

  pageObject[type] = function (e) {

   var key = type + &#39;Size&#39;

   var changedData = {}

   changedData[key] =

    this.data[key] === &#39;default&#39; ? &#39;mini&#39; : &#39;default&#39;

   this.setData(changedData)

  }

 })(types[i])

}

 

Page(pageObject);


以上就是本文的全部内容，希望对大家的学习有所帮助。


版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 方法 微信小程序 小程序 学习
上一篇:物联网小程序，连接未来的智能生活
下一篇:微信小程序中实时圆形进度条的实现方式探讨
相关文章

 发表评论

暂时没有评论，来抢沙发吧~