微信小程序，学习笔记（二）样式（WXSS）及一个简单的小测试用例

微信小程序，学习笔记（二）样式（WXSS）及一个简单的小测试用例

WXSS（WeiXin Style Sheets）

这东西其实是微信自己的一种

CSS

语言，大部分都还是

CSS

语法，也有自己的东西，主要针对微信自己的

WXML

标记语言而生的，用来丰富其组件的显示效果。

WXSS

相对

CSS

并没有太大差别，只是需要注意以下几点

rpx

像素单位，具体值是：

1rpx == 0.5px == 1物理像素

，物理像素说的是硬件上表达的像素概念；

样式导入：在

WXSS

文件中使用

@import test.wxss;

方式导入，后面的分号不要省略；

样式使用方式：内联和行内，由于组件的

style

属性接受动态参数形式去在运行时改变样式，因此建议：静态样式即不太会改变的样式不要使用行内

style

形式，避免运行时重复渲染，而需要动态发生变化的采取行内方式，比如：

style="width:{{myWidth}};color:{{myColor}};"

，列表中的焦点行，获取到焦点时改变其宽度和字体颜色，就只要把这两个属性放到行内去运行时渲染。

例子： （预期达到的效果：点击表内行，背景框变亮，字体颜色变成白色）

<!--index.wxml-->
<view   id="ctl-list-date" class="ctl-list-date">
<view bindtap="tapDateRow" wx:for="{{dates}}" wx:key="unique" wx:for-index="idx" wx:for-item="date" id="ctl-list-{{idx}}" class="ctl-list-row" style="background:url({{rowStyle.bgImgUrl}}) no-repeat center;color:{{rowStyle.color}};">{{dates[index + idx].desc}}</view>
</view>

页面图：

// index.js

Page({
data: {
rowStyle: {
bgImgUrl: '../resources/images/dlist_bg.png',
color: '#727374'
}
},

// 点击日期行
tapDateRow: function ( event ) {

console.log( event );
// console.log( event.currentTarget );
// console.log( event.currentTarget == event.target );

var that = this;

// 这里改变点击时行的样式
var rowStyle = {
bgImgUrl: "../resources/images/dlist_bg_focus.png",
color: '#FFFFFF'
};

that.setData({rowStyle: rowStyle});
}
});

点击行之后效果图：



从两图效果看，并不是想要的结果，点击行之后并不是当前行改变了，而是所有行都发生了变化，想想也是，

Page

中的

data

数据属性是全局的，而列表行又是通过

wx:for

生成的多组件列表，属性所用的数据都是

data.rowStyle

中的样式数据，当点击时数据发生变化，导致所有行都发生了变化。

但是

wxml

又不允许直接操作组件，也没法获取到组件对象下，只能从数据入手。

测试用例

列表行单个刷新样式的解决方法（从数据入手）

此方法可能比较笨拙，经测试可以达到预期效果，具体思路：

页面组件中，动态属性写法：（运用

{{flag ? sth : other}}

）动态改变属性值；

怎么让

flag

在点击时能动态改变值呢，这个时候需要用到

wx:for

创建组件时的索引

idx

以及自定义属性了，即给每一行一个自定义属性，而这个属性的值就是当前组件的创建时的索引值，即：

data-index="{{idx}}"

，这样做之后，就可以在

index.js

中通过

event.target.dataset.index

方式去取到该值；

具体实现如下：

页面修改：

<!-- index.wxml -->

<view bindtap="tapDateRow" wx:for="{{dates}}" wx:key="unique" wx:for-index="idx" wx:for-item="date" id="ctl-list-{{idx}}" class="ctl-list-row" data-index="{{idx}}" style="background:url({{rowFocusFlagArray[idx] == 1 ? rowFocusStyle.bgImgUrl : rowDftStyle.bgImgUrl}}) no-repeat center;color:{{rowFocusFlagArray[idx] == 1 ? rowFocusStyle.color : rowDftStyle.color}};">{{dates[index + idx].desc}}</view>
</view>

脚本修改：（体现在数据和行为上）

Page({
data: {

// 这个数组用来保存焦点行标记值，非焦点行均为 'undefined'，焦点行为：1
rowFocusFlagArray: [],

// 默认行样式
rowDftStyle: {
bgImgUrl: '../resources/images/dlist_bg.png',
color: '#727374'
},

// 焦点行样式
rowFocusStyle: {
bgImgUrl: '../resources/images/dlist_bg_focus.png',
color: '#FFFFFF'
}
},

// 这里面初始化工作要搞一下
onLoad: function () {

var that = this;

var dates = util.getSevenDates();

that.setData({ dates: dates });

// 首先要清空下行标记值数组
var rowFocusFlagArray = [];

// 默认第一行为焦点行
rowFocusFlagArray[0] = 1;

that.setData({rowFocusFlagArray: rowFocusFlagArray});
},

// 点击日期行，主要点击事件逻辑就在这里面了
tapDateRow: function ( event ) {
console.log( event );
// console.log( event.currentTarget );
// console.log( event.currentTarget == event.target );

var that = this;

// 1. 更新前先清空焦点标识数组，防止上一个样式不还原
var rowFocusFlagArray = [];

// 2. 根据 dataset 获取当前的索引，重点：必须要每行要加上个自定义数据：index
var index = event.target.dataset.index;

console.log( 'index = ' + index );

// 3. 然后重新设置标识值，这里拿到的 index 就是当前被点击的行的索引了
rowFocusFlagArray[index] = 1;

// 4. 重新改变样式标识，刷新页面
that.setData({rowFocusFlagArray: rowFocusFlagArray});
}
}

经过上面的修改，正式达到我们想要的效果（网上随便百度了个屏幕录制gif软件，发现还挺好用的 - -！）



用例说明

页面： 充分利用

wx:for

的

index

值，并且和自定义属性

dataset

相结合，生成

data-index

自定义属性，值等于

wx:for

的

index

值；

数据： 添加两个样式对象和一个行标记值数组（

rowDftStyle

,

rowFocusStyle

,

rowFocusFlagArray

），三者关系为：通过判断

rowFocusFlagArray

中对应行的标识值来决定采用

rowDftStyle

还是

rowFocusStyle

去作为当前行的样式；

行为： 先清空数据防止上一焦点行不还原，然后根据

dataset

获取当前行索引，再根据索引去设置

rowFocusFlagArray

值，最后通过自动刷新机制去改变样式；

总结

这篇本来根据

W3CSchool

分类是要和组件，和

WeUI.js

框架放一起，最后弄着弄着搞了点小例子，后面也看了下组件和

WeUI.js

框架东西还是挺多的，决定分开放到下一次再去学习了，放一起怕消化不掉；

本篇主要简单记录了

WXSS

自己的一点东西，应该不止像素和样式问题，后续再慢慢积累，主要是后面的动态改变焦点例子的实现，这个也算是承上启下吧，连接上一篇学习的内容，做了个小小的测试练习，复习下上一篇内容，加深下印象；

这个小测试用例目的主要有关：焦点动态改变问题，由于不能直接操作页面组件，因此只能从数据和行为方面去做处理，还好想到了个方法，感觉这个比较笨拙，不知道还有没有更方便的方法来实现。

完整

demo

代码地址：https://github.com/gcclll 路径：

JavaScript-Codes/demos/WeChat/TvodPlayList/