尺寸單位:
rpx(responsive pixel): 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上,屏幕寬度為375px,共有750個(gè)物理像素,則750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。所以用rpx可解決適配問(wèn)題
樣式導(dǎo)入:
-
/** app.wxss **/
-
@import "common.wxss";
內(nèi)聯(lián)樣式:
框架組件上支持使用 style、class 屬性來(lái)控制組件的樣式。
style:靜態(tài)的樣式統(tǒng)一寫到 class 中。style 接收動(dòng)態(tài)的樣式,在運(yùn)行時(shí)會(huì)進(jìn)行解析,請(qǐng)盡量避免將靜態(tài)的樣式寫進(jìn) style 中,以免影響渲染速度。
-
<view style="color:{{color}};" />
class:用于指定樣式規(guī)則,其屬性值是樣式規(guī)則中類選擇器名(樣式類名)的集合,樣式類名不需要帶上.,樣式類名之間用空格分隔。
-
<view class="normal_view" />

動(dòng)態(tài)添加class樣式:
-
<button bindtap="bindTabTap" class="btn1 {{signItem.class}}" data-index="{{signItem}}">{{signItem.state}}</button>
-
//添加class樣式
-
for (var i = 0; i < list.length; ++i) {
-
if (list[i].status === 1) { //當(dāng)狀態(tài)為1的時(shí)候顯示已簽,返回okSigin的class樣式,class在wxss已設(shè)置
-
list[i].class = 'okSigin';
-
list[i].state = '已簽';
-
continue;
-
}
-
list[i].class = 'noSigin'; //當(dāng)狀態(tài)為0的時(shí)候顯示未簽,返回noSigin的class樣式,class在wxss已設(shè)置
-
list[i].state = '未簽';
-
}
當(dāng)簽到狀態(tài)是已簽時(shí),禁止用戶再次簽到(點(diǎn)擊)
wxml:
-
<button bindtap="redirect" data-text="{{signItem.text}}" data-type="{{signItem.type}}" data-state="{{signItem.state}}" hover-class="none"> //設(shè)置button
-
<view class="scroll">
-
<view class="radius1"></view>
-
<text class="text1">{{signItem.text}}</text>
-
<button bindtap="bindTabTap" class="btn1 {{signItem.class}}" data-index="{{signItem}}">{{signItem.state}}</button>
-
</view>
-
</button>
-
//點(diǎn)擊button
-
redirect :function (e) {
-
var text = e.target.dataset.text;
-
var type = e.target.dataset.type;
-
var state = e.target.dataset.state;
-
if (state === '已簽') { //已簽狀態(tài)是,禁止用戶再次簽到
-
return;
-
}
-
wx.navigateTo({
-
url: '../signInDetails/signInDetails?text=' + text + '&&type=' + type, //頁(yè)面?zhèn)鲄⒌较乱粋€(gè)頁(yè)面
-
success: function(res){
-
// success
-
-
},
-
fail: function() {
-
// fail
-
},
-
complete: function() {
-
// complete
-
}
-
})
-
},
下一個(gè)頁(yè)面接收參數(shù):
-
<view class="scroll">{{text}}<span style="display:none">{{type}}</span></view>
-
var text = options.text;
-
var type = options.type;
-
that.setData({
-
text: text,
-
type: type
-
})