Touch WX 开发文档

Touch WX 开发文档

常用样式库

框架提供了一套公用的Less函数库实现了开发过程中很多常见的样式。该文件位于utils/mixins.less,在utils目录里的less文件都无需在页面中引入就能使用。

用法举例

如果要为一个容器添加一像素细线,不能使用border,因为border的一像素在移动端会显得很粗。框架的样式库提供了一像素细线的样式函数,直接使用即可。做法:

<view class="title"></view>

less

.title{
  width: 50px;
  height: 50px;
  background: #F6FAFE;
  .mix-1px(0, 0, 1, 0, #ccc);
}

效果如下:

图片名称

mixins.less中实现的样式有:

1像素细线

.mix-1px (@top, @right, @bottom, @left, @color)

/* 上边1像素细线 */
.mix-1px(1, 0, 0, 0, #ccc);

/* 右边1像素细线 */
.mix-1px(0, 1, 0, 0, #ccc);

/* 下边1像素细线 */
.mix-1px(0, 0, 1, 0, #ccc);

/* 左边1像素细线 */
.mix-1px(0, 0, 0, 1, #ccc);

/* 上下1像素细线 */
.mix-1px(1, 0, 1, 0, #ccc);

/* 左右1像素细线 */
.mix-1px(0, 1, 0, 1, #ccc);

/* 上下左右1像素细线 */
.mix-1px(1, 1, 1, 1, #ccc);

元素对齐
/* 水平居中 */
.mix-flex-x-center();

/* 垂直居中 */
.mix-flex-y-center();

/* 水平垂直水平居中 */
.mix-flex-center();
文字显示
/* 文字超出部分出省略号 */
.mix-text-overflow();