圈子金融的weex领悟 -自定义button组件

先看一下效果图：

不可用状态，以及手指按下时的效果

正常状态

通常我们在提交页面的时候，当用户输入不完整时我们要显示为不可用的状态（灰一点），输入正确后，就为正常状态

因为weex中没有带button组件，那我们就只能自定义一下，其实也很简单，就是一个div包裹个text，一个做容器，控制高度背景，一个做文本显示

<template> <div class="btn {{full==true?'btn-full':'btn-normal'}}" style="background-color:{{disabled?'#9bcdfa':btnColor}}"> <text style="font-size:{{textsize}};color:{{textcolor}};"> {{text}}</text> </div> </template>

数据绑定部分：

<script> require('weex-components'); var apis = require('./api.js');//引一个公众的js，个人项目用到，跟button无关 module.exports = { data: { text: "按钮文本", textsize: 0, textcolor: "#fff", disabled: false,//控制是否可用 full: false//是否满宽度显示，否则显示650 }, created: function () { apis.init(this, { font: true });//初始化页面，项目中用，跟button无关 //如果没定义textsize,就使用默认的 if (this.textsize == 0) this.textsize = this.titleFontSizeLarger; }); } } </script>

很简单的数据定义，disabled会控制背景色

style="background-color:{{disabled?'#9bcdfa':btnColor}}"

这里的btnColor是apis.js里面定义的，根据自己需要修改

full会控制使用的样式（在一个app按钮通常相同样式的，要不满宽，要么留一点边，由样式控制）

上样式表：

<style> .btn { height: 80px; border-radius: 5px; justify-content: center; align-items: center; padding: 20; background-color: #0f8cf0; } .btn-normal { width: 650; margin-left: 50; } .btn-full { width: 750; } .btn:active { background-color: #9bcdfa; } </style>

.btn是按钮的样式，如果是full，则还会加上.btn-full，否则加上.btn-normal

class="btn {{full==true?'btn-full':'btn-normal'}}"

.btn:active是手指按下的效果

这样就完成一个按钮组件定义了，使用方法如下：
比如我们有一个aa.we页面，在data中申明一个属性btnDisabled，默认true(不可用)

module.exports = {
    data: {  
      btnDisabled:true,
      ...
    }
} 

模板

 <button onclick="submit" disabled={{btnDisabled}} style="margin-top:30;" text="提交申请"></button> 

这样按钮就显示出来了，并且定义了点击事件submit

这时候我们只需要修改btnDisabled的值，就可以控制是否可用了，另外在提交的时候加个判断

submit:function(e){
        if(this.disabled) return; //不可用状态，不执行
}