欧美日韩国产一区,亚洲一区视频,色综合久久久久,私密按摩师舌头伸进去了,99re6这里只有精品,夜夜性日日交xxx性hd

button按鈕

本文編輯： DevelopeWhite DevelopeWhite瀏覽 7060 版權所有，嚴禁轉載

組件說明:

button，顧名思義，按鈕，類似于html的button標簽。我們可以設置按鈕的屬性，比如字體顏色大小，背景顏色等，可以給按鈕綁定事件，用戶點擊時會觸發事件。

組件用法：

按鈕1
wxml

<!--index.wxml-->
<view class="content">
    <text class="con-text">怎么飛？點擊【按鈕】即飛</text>
    <button class="con-button">Fly</button>
</view>

js

Page({
  data:{  
  },
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉所帶來的參數
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  }
})

wxss

.content{
  padding-top: 20px;
}

.con-text{
  display: block;
  padding-bottom: 10px;
}

.con-button{
  margin-top: 10px;
  color: black;
  background-color: lightgreen
}

按鈕尺寸和類型
wxml

<!--index.wxml-->
<view class="content">
    <view class="con-top">
        <text class="text-decoration">#按鈕尺寸#</text>
        <text class="con-text">mini:</text>
        <button class="con-button" size="mini">Fly</button>
        <text class="con-text">default:</text>
        <button class="con-button" size="default">Fly</button>
    </view>
    <view class="con-bottom">
        <text class="text-decoration">#按鈕類型#</text>
        <text class="con-text">primary:</text>
        <button class="con-button" type="primary">Fly</button>
        <text class="con-text">default:</text>
        <button class="con-button" type="default">Fly</button>
        <text class="con-text">warn:</text>
        <button class="con-button" type="warn">Fly</button>
    </view>
</view>

js

Page({
  data:{  
  },
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉所帶來的參數
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  }
})

wxss

.content{
  padding-top: 20px;
  width: 90%;
  padding-left: 20px;
}

.con-text{
  display: block;
  padding-bottom: 10px;
}

.con-button{
  color: black;
  background-color: lightgreen;
  margin-bottom: 10px;
}

.con-bottom{
  padding-top: 20px;
}

.con-top{
  padding-bottom: 20px;
}

.text-decoration{
  color: blue;
  display: block;
  text-align: center;
}

按鈕3
wxml

<!--index.wxml-->
<view class="content">
    <view class="con-top">
        <text class="text-decoration">#按鈕是否鏤空#</text>
        <text class="con-text">鏤空:</text>
        <button class="con-button" plain>本寶寶的背景被鏤空了</button>
        <text class="con-text">沒鏤空:</text>
        <button class="con-button">我沒有被鏤空唉</button>
    </view>
    <view>
        <text class="text-decoration">#按鈕是否禁用#</text>
        <text class="con-text">禁用:</text>
        <button class="con-button" disabled>禁用</button>
        <text class="con-text">沒禁用:</text>
        <button class="con-button">活躍</button>
    </view>
    <view class="con-bottom">
        <text class="text-decoration">#按鈕前是否帶loading圖標#</text>
        <text class="con-text">有loading:</text>
        <button class="con-button" loading>開車</button>
        <text class="con-text">無loading:</text>
        <button class="con-button">開車</button>
    </view>
</view>

js

Page({
  data:{  
  },
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉所帶來的參數
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  }
})

wxss

.content{
  padding-top: 20px;
  width: 90%;
  padding-left: 20px;
}

.con-text{
  display: block;
  padding-bottom: 5px;
}

.con-button{
  color: black;
  background-color: lightgreen;
  margin-bottom: 5px;
}

.con-bottom{
  padding-top: 5px;
}

.con-top{
  padding-bottom: 5px;
}

.text-decoration{
  color: blue;
  display: block;
  text-align: center;
}

按鈕與表單

wxml

<!--index.wxml-->
<view class="content">
    <text class="text-decoration">#按鈕前是否帶loading圖標#</text>
    <form class="formstyle" bindsubmit="formSubmit" bindreset="formReset">
        <view class="shurustyle">
            輸入：
            <input name="username" class="inputstyle" />
        </view>
        <view class="buttonstyle">
            <button form-type="reset" class="con-button" hover-class="hoverbutton">重置</button>
            <button form-type="submit" class="con-button" hover-class="hoverbutton">提交</button>
        </view>
    </form>
</view>

js

Page({
  data:{  
  },
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉所帶來的參數
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  },
  formSubmit:function(e){
    console.log(e.detail.value);
  },
  formReset:function(e){
    console.log(e.detail.value);
  }
})

wxss

.content{
  padding-top: 20px;
  width: 90%;
  padding-left: 20px;
}

.con-button{
  color: black;
  background-color: lightgreen;
  margin-bottom: 5px;
}

.text-decoration{
  color: blue;
  display: block;
  text-align: center;
  padding-bottom: 20px;
}

.buttonstyle{
  display: flex;
  flex-direction: row;
  padding-top: 20px;
}

.inputstyle{
  background-color: lightgray;
  width: 80%;
}

.shurustyle{
  padding-left: 15%;
}

.hoverbutton{
  background-color: lightgray;
}

按鈕樣式和綁定事件

wxml

<view class="content">
    <view class="con-top">
        <text class="text-decoration">#按鈕點擊樣式改變和綁定事件#</text>
        <button class="con-button" hover-class="hoverclass" loading="{{isloading}}" bindtap="changeLoading">loading</button>
    </view>
</view>

js

Page({
  data:{  
    isloading:true
  },
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉所帶來的參數
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  },
  changeLoading:function(){
    console.log("loading status:"+this.data.isloading);
    var loadingstatus=this.data.isloading;
    this.setData({
      isloading:!loadingstatus
    })
  }
})

wxss

.content{
  padding-top: 20px;
  width: 90%;
  padding-left: 20px;
}

.con-button{
  color: black;
  background-color: lightgreen;
  margin-top: 15px;
}

.text-decoration{
  color: blue;
  display: block;
  text-align: center;
  font-family: "KaiTi"
}

.hoverclass{
  background-color: orange;
  color: green;
  font-size: 25px;
}

主要屬性：

屬性 類型 默認值 描述
size String default 表示按鈕的大小，有兩個值：default和mini
type String default 表示按鈕的樣式類型，有三個值：default、primary和warn
plain Boolean false 表示按鈕是否鏤空，即背景是否被抹去，不寫該屬性則為false，寫上該屬性則為true，也可寫成plain=”false”
disabled Boolean false 表示按鈕是否被禁用，不寫該屬性則為false，寫上該屬性則為true，也可寫成plain=”false”
loading Boolean false 表示按鈕名稱前是否有loading圖標，不寫該屬性則為false，寫上該屬性則為true，也可寫成plain=”false”
form-type String 無 與form表單組件一起使用時，reset表示清空form表單內容事件，submit表示提交form表單內容事件，即有兩個值：reset和submit
hover-class String button-hover 表示按鈕被點擊時的樣式，可以自定義一個css，然后將hover-class指向這個css
如有技術問題或對本文有反饋，請加入QQ群：
微信小程序實戰5營： 微信小程序Club實戰5營