小程序模板网

button组件学习笔记

发布时间:2018-04-16 11:03 所属栏目:小程序开发教程

作者:johnchai,来自原文地址 
button按钮组件说明:

button,顾名思义,按钮,类似于html的button标签。我们可以设置按钮的属性,比如字体颜色大小,背景颜色等,可以给按钮绑定事件,用户点击时会触发事件。

button按钮组件示例代码运行效果如下:

下面是WXML代码:

 

				
  1. <!--index.wxml-->
  2. <view class="content">
  3. <text class="con-text">怎么飞?点击【按钮】即飞</text>
  4. <button class="con-button">Fly</button>
  5. </view>

下面是JS代码:

 

				
  1. Page({
  2. data:{
  3. },
  4. onLoad:function(options){
  5. // 页面初始化 options为页面跳转所带来的参数
  6. },
  7. onReady:function(){
  8. // 页面渲染完成
  9. },
  10. onShow:function(){
  11. // 页面显示
  12. },
  13. onHide:function(){
  14. // 页面隐藏
  15. },
  16. onUnload:function(){
  17. // 页面关闭
  18. }
  19. })

下面是WXSS代码:

 

				
  1. .content{
  2. padding-top: 20px;
  3. }
  4. .con-text{
  5. display: block;
  6. padding-bottom: 10px;
  7. }
  8. .con-button{
  9. margin-top: 10px;
  10. color: black;
  11. background-color: lightgreen
  12. }

下面是WXML代码:

 

				
  1. <!--index.wxml-->
  2. <view class="content">
  3. <view class="con-top">
  4. <text class="text-decoration">#按钮尺寸#</text>
  5. <text class="con-text">mini:</text>
  6. <button class="con-button" size="mini">Fly</button>
  7. <text class="con-text">default:</text>
  8. <button class="con-button" size="default">Fly</button>
  9. </view>
  10. <view class="con-bottom">
  11. <text class="text-decoration">#按钮类型#</text>
  12. <text class="con-text">primary:</text>
  13. <button class="con-button" type="primary">Fly</button>
  14. <text class="con-text">default:</text>
  15. <button class="con-button" type="default">Fly</button>
  16. <text class="con-text">warn:</text>
  17. <button class="con-button" type="warn">Fly</button>
  18. </view>
  19. </view 


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23471.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询