微信小程式開發——設定屬性及樣式選擇器
阿新 • • 發佈:2019-01-29
WeChat小程式交流(QQ群:769977169)
程式碼示例
1、屬性設定
xxx.wxml
<view style='background-color:#DC143C;width:100%;height:30px;'>樣式屬性</view> <view style='background-color:#D8BFD8;width:100%;height:30px;'>背景屬性</view> <view style='display:flex'> <view class='backgroundStyle'></view> <view style='width:200px;height:200px;background-image:url("../../images/icon/icon.png");backgound-repeat:no-repeat'></view> </view> <view style='background-color:#D8BFD8;width:100%;height:30px;'>尺寸屬性</view> <view style='display:flex'> <view class='sizeStyle'></view> <view class='sizeStyle2'></view> </view> <view style='background-color:#D8BFD8;width:100%;height:30px;'>邊框屬性</view> <view style='display:flex'> <view class='borderStyle'></view> <view class='borderStyle2'></view> </view> <view style='background-color:#D8BFD8;width:100%;height:30px;'>內邊距屬性</view> <view style='display:flex;background-color:yellow;width:100%;height:200px;'> <view class='paddingStyle'></view> <view class='paddingStyle2'></view> </view> <view style='background-color:#D8BFD8;width:100%;height:30px;'>外邊距屬性</view> <view style='display:flex;background-color:green;width:100%;height:200px;'> <view class='marginStyle'></view> <view class='marginStyle2'></view> </view> <view style='background-color:#D8BFD8;width:100%;height:50px;'>外邊距合併屬性(元素1上距10 + 元素2上距5,合併後取10,而不是15</view> <view style='display:flex;flex-direction:column;background-color:orange;width:100%;height:200px;'> <view class='marginTotalStyle'></view> <view class='marginTotalStyle2'></view> </view> <view style='background-color:#D8BFD8;width:100%;height:50px;'>輪廓</view> <view style='display:flex;background-color:yellow;width:100%;height:100px;'> <view class='outlineStyle'></view> </view> <view style='background-color:#D8BFD8;width:100%;height:30px;'>文字</view> <view style='display:flex;background-color:green;width:100%;height:100px;'> <view class='textStyle'>hello world 文字屬性設定</view> </view> <view style='background-color:#D8BFD8;width:100%;height:30px;'>字型</view> <view style='display:flex;background-color:yellow;width:100%;height:100px;'> <view class='fontStyle'>hello world 字型屬性</view> </view>
xxx.wxss
.backgroundStyle{ width: 50px; height: 50px; background-color: #0000FF; } .backgroundStyle2{ width: 50px; height: 50px; /* wxss中設定背景影象無效 */ /* background-image:url("../../images/icon/error.png"); */ } .sizeStyle{ width: 50px; height: 50px; background-color: #0000FF; } .sizeStyle2{ /* width: 30%; height: 30%; */ min-height: 100px; width: 30px; background-color: #6A5ACD; } .borderStyle{ width: 80px; height: 80px; background-color: orange; border-radius: 10px; border: 5px solid green; } .borderStyle2{ width: 80px; height: 80px; background-color: yellow; border-top: 5px groove blue; border-left: 3px dashed red; border-right: 2px double green; border-bottom: 3px dotted red; } .paddingStyle{ width: 40px; height: 40px; background-color: blue; padding-top: 10px; padding-left: 10px; } .paddingStyle2{ width: 80px; height: 80px; background-color: orange; padding-top: 30px; padding-right: 20px; padding-bottom: 50px; padding-left: 80px; } .marginStyle{ width: 40px; height: 40px; background-color: blue; margin: 10px; } .marginStyle2{ width: 400px; height: 200px; background-color: rebeccapurple; margin-top: 20px; margin-right: 30px; margin-bottom: 10px; margin-left: 100px; } .marginTotalStyle{ width: 40px; height: 40px; background-color: blue; margin-top: 10px; margin-bottom: 10px; } .marginTotalStyle2{ width: 40px; height: 40px; background-color: red; margin-top: 5px; } .outlineStyle{ width: 60px; height: 60px; background-color: blue; border: green dotted 3px; margin: 10px; outline: red solid 3px; } .textStyle{ width: 80%; height: 60px; background-color: lightblue; margin: auto; color: red; direction: rtl; line-height: 60px; letter-spacing: 5rpx; text-align: center; text-decoration: line-through; text-shadow: gray; text-transform: uppercase; white-space: nowrap; word-spacing: 10rpx; } .fontStyle{ width: 80%; height: 60px; background-color: lightblue; margin: auto; font-size: 20px; font-stretch: wider; font-style: italic; font-weight: bolder; font-size-adjust: 0.6; font-family: Arial, Helvetica, sans-serif; }
2、屬性選擇器
xxx.wxml
<view class='classStyle'>類選擇器 .name{…}</view> <view id='idStyle'>ID選擇器 #name{…}</view> <view>元素選擇器 name{…}</view> <view class="parentStyle"> <view class='allChildStyle'>包含選擇器 parent child{…}</view> <view class='nextChildStyle'>子元素選擇器 parent> child{…}</view> </view> <view class='allChildStyle'>包含選擇器 parent child{…}</view> <!-- 無效 --> <view class='nextChildStyle'>子元素選擇器 parent child{…}</view> <!-- 無效 -->
xxx.wxss
/* 類選擇器 */
.classStyle{
width: 100%;
height: 40px;
background-color: lightblue;
}
/* id選擇器 */
#idStyle{
width: 200px;
height: 40px;
background-color: lightgreen;
}
/* 元素選擇器 */
view{
width: 240px;
height: 40px;
background-color: olivedrab;
}
/* 包含選擇器 */
.parentStyle{
height: 80px;
background-color: orange;
}
.parentStyle .allChildStyle{
width: 280px;
height: 30px;
background-color: purple;
}
.parentStyle> .nextChildStyle{
width: 250px;
height: 30px;
background-color: goldenrod;
}