ホームページ >WeChat アプレット >ミニプログラム開発 >WeChat アプレット コンポーネントの解釈と分析: ボタン ボタンのサンプル コード

WeChat アプレット コンポーネントの解釈と分析: ボタン ボタンのサンプル コード

高洛峰
高洛峰オリジナル
2017-03-19 17:36:342170ブラウズ

buttonButtonコンポーネントの説明:

ボタンは、名前が示すように、htmlのボタンタグに似ています。フォントの色サイズ、背景色などのボタンのプロパティを設定し、ユーザーがクリックしたときにトリガーされるイベントをボタンにバインドできます。

button button コンポーネントのサンプル コードは次のように実行されます:

WeChat アプレット コンポーネントの解釈と分析: ボタン ボタンのサンプル コード


以下は WXML コードです: reee



以下JS コードです:

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



WXSS コードは次のとおりです:

Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})


WeChat アプレット コンポーネントの解釈と分析: ボタン ボタンのサンプル コード



WXML コードは次のとおりです:

.content{
  padding-top: 20px;
}
.con-text{
  display: block;
  padding-bottom: 10px;
}
.con-button{
  margin-top: 10px;
  color: black;
  background-color: lightgreen
}



以下は JS コードです:

<!--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>



WXSS コードは次のとおりです:

Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})


WeChat アプレット コンポーネントの解釈と分析: ボタン ボタンのサンプル コード



WXML コードは次のとおりです:

.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;
}



以下は JS コードです:

<!--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>



以下は WXSS コードです:

以下はWXMLコードです:

WeChat アプレット コンポーネントの解釈と分析: ボタン ボタンのサンプル コード

Page({
  data:{
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})


以下は JS コードです:

.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;
}

以下は WXSS コードです:

<!--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>



以下は WXML コードです

​​

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);
  }
})
WeChat アプレット コンポーネントの解釈と分析: ボタン ボタンのサンプル コード


JS コードは次のとおりです:


.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;
}

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;
}

button按钮的主要属性:

属性

类型

默认值

描述

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



以上がWeChat アプレット コンポーネントの解釈と分析: ボタン ボタンのサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。