微信小程序之wxss样式使用总结

对于一个很久不搞前端的程序猿，真的好多前端东西都不熟悉，在开发小程序途中，一路跌跌拌拌的，很幸运，也学到了挺多东西。估计也有和我一样的同学存在，所以特意总结了一些开发用到的效果样式，特意分享出来供大家参考，不喜勿喷啊。

1、scroll-view隐藏滚动条

       加入如下代码就好使了，特别方便

::-webkit-scrollbar{
  width: 0;
  height: 0;
  color: transparent;
}

2、button设置文本垂直居中

        设置行高line-height (=button的行高)就行，还有问题的话可以稍稍调节；水平方向就很好调节了。

3、设置文本text单行显示、多行显示,超出的加省略号

/* 设置文本单行，溢出的加... */
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
/* 设置文本多行，-webkit-line-clamp指定在哪一行加… */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:3;
    overflow: hidden;

      以下为显示效果

               

             

4、让控件居于底部不随滚动而变化，置于顶层页面

position：fixed;    //设置固定布局
bottom：0;	    //距左边距
right:100rpx;	    //距右边距
z-index:1;	    //设置置于顶层

5、设置button边框样式，使用伪元素::after

button::after {
  border-radius: 20rpx;            //设置圆角    
  border: 0;                        
  border-bottom: 5rpx solid red;   //设置顶部5rpx,红色边框
}

6、使图片自适应宽高

background-repeat:no-repeat; 
background-size:100% 100%;
-moz-background-size:100% 100%;

7、获取屏幕高度，动态设置wxss样式

//  宽度固定，始终为750rpx；高度可以通过以下代码换算获取

var that = this;
//  高度自适应
wx.getSystemInfo({
   success: function (res) {
     let clientHeight = res.windowHeight-120,
     let clientWidth = res.windowWidth,
     let rpxR = 750 / clientWidth;

     //计算后的高度，单位rpx
     var calcHeight = clientHeight * rpxR;
     that.setData({
        winHeight: calcHeight 
     });
    }
 });

8、文本text中加空格

       在text标签里面加上属性decode=”true”，然后使用 加空格就好使，只能在text里面才能这样用