組件屬性來自他人：這個比較好
https://www.cnblogs.com/yang-shuai/p/6899430.html
官方：東西比較少萎战，基本的屬性沒有。
https://developers.weixin.qq.com/miniprogram/dev/component/label.html
下面這個組件都有 屬性全面介紹
https://www.w3cschool.cn/weixinapp/3glu1q92.html
但是沒有例子，我來寫一下
一鞋邑。button
幾個button組件樣式：
http://www.reibang.com/p/93d7104be420
1.1去除系統(tǒng)邊框
在你button的wxss里加一段代碼就行了
.submitBtn::after{
border: none;
}
屏幕快照 2019-06-20 下午12.42.00.png
<button class='submitBtn' bindtap="submitBtnClick">提交</button>
.submitBtn{
position: absolute;
margin-top: 50px;
left: 26px;
right: 26px;
font-size: 16px;
color: green;
background: yellow;
border-radius: 5px;
border:5px solid red;
}
.submitBtn::after{
border: none;
}
2。button背景圖片：
wxss這個只支持網(wǎng)絡(luò)獲取的
background-image: url(https://xxx/xxx.pmg);
- 本地圖片是不支持在css中被引用資源的
- 會降低頁面的渲染速度，內(nèi)聯(lián)樣式
- 一個可以轉(zhuǎn)換成base64的條件：如果圖片足夠小且因為用處的特殊性無法被制作成雪碧圖（CssSprites）瞒渠，在整個網(wǎng)站的復用性很高且基本不會被更新。
from:https://www.cnblogs.com/coco1s/p/4375774.html
4.小程序運行報錯：“Failed to load local image resource xxx.png the server responded with?
<image class='btnImg' src="../../imgs/mapTag.png"></image>
路徑不對技扼，改為src="/imgs/mapTag.png"
效果：
屏幕快照 2019-06-20 下午4.24.43.png
<image class='btnImg' src="/imgs/myWalletImg.png"></image>
<button class='submitBtn' bindtap="submitBtnClick">提交
</button>
.submitBtn{
position: absolute;
margin-top: 50px;
left: 6%;
right:6%;
height: 50px;
color: green;//字體顏色
border-radius: 5px; //圓角
border:5px solid red;//邊框?qū)挾扰c顏色
font-size: 16px;//字體大小
background-color: rgba(255,255,255,0);//透明背景
}
.submitBtn::after{
border: none;//去除系統(tǒng)邊框
}
.btnImg{
position: absolute;
margin-top: 50px;
height: 50px;
width: 88%;
}
只要imag放在button前面伍玖，大小位置一樣，button背景透明即可剿吻，background-color: rgba(255,255,255,0);窍箍。
button 的文字居中
display: flex;
align-items: center;
justify-content: center;
二。image
微信小程序image圖片的填充方式
https://www.w3cschool.cn/weixinapp/weixinapp-image.html
三 text
http://www.reibang.com/p/ae1a207a63d6
屏幕快照 2019-06-21 上午11.08.31.png
//shuxing
屏幕快照 2019-06-21 上午11.08.42.png
四input
屬性：
https://www.w3cschool.cn/weixinapp/3glu1q92.html
實例：
IMG_0444.PNG
<!--輸入框-->
<input
class='names'
placeholder-class="phcolor"
placeholder='老虎轉(zhuǎn)賬leme'
maxlength="11"
type = "idcard" //鍵盤類型 刪掉
value="扭一下" //值
style="width:111px;height:81px"
bindinput="bindKeyInput" //改變
bindblur='bindblurEvent'
></input>
/*輸入框*/
.names{
position: absolute;
left: 28px;
height: 18px;
width: 200px;
top: 30px;
color: black;
background-color: red;
}
.phcolor{
color: rgb(141, 107, 134);
}
-------------------------------------------
data: {
inputValue: ''
},
bindKeyInput: function (e) {
console.log('輸入內(nèi)容觸發(fā)input事件5', e.detail)
this.setData({
inputValue: e.detail.value
})
},
bindblurEvent: function (e) {
console.log("失去焦點時", e.detail)
},
//button點擊事件
submitBtnClick:function(){
console.log('xxx',this.data.inputValue);
},
屏幕快照 2019-06-24 上午11.36.26.png
