尺寸单位:
rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。所以用rpx可解决适配问题
样式导入:
- /** app.wxss **/
- @import "common.wxss";
内联样式:
框架组件上支持使用 style、class 属性来控制组件的样式。
style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
- <view style="color:{{color}};" />
class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。
- <view class="normal_view" />
动态添加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) { //当状态为1的时候显示已签,返回okSigin的class样式,class在wxss已设置
- list[i].class = 'okSigin';
- list[i].state = '已签';
- continue;
- }
- list[i].class = 'noSigin'; //当状态为0的时候显示未签,返回noSigin的class样式,class在wxss已设置
- list[i].state = '未签';
- }
当签到状态是已签时,禁止用户再次签到(点击)
wxml:
- <button bindtap="redirect" data-text="{{signItem.text}}" data-type="{{signItem.type}}" data-state="{{signItem.state}}" hover-class="none"> //设置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>
- //点击button
- redirect :function (e) {
- var text = e.target.dataset.text;
- var type = e.target.dataset.type;
- var state = e.target.dataset.state;
- if (state === '已签') { //已签状态是,禁止用户再次签到
- return;
- }
- wx.navigateTo({
- url: '../signInDetails/signInDetails?text=' + text + '&&type=' + type, //页面传参到下一个页面
- success: function(res){
- // success
- },
- fail: function() {
- // fail
- },
- complete: function() {
- // complete
- }
- })
- },
下一个页面接收参数:
- <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
- })