常用的css样式

实现多行文本尾行超出文本省略
{
    padding: 0 5rpx;
    height: 70rpx; 
    font-size: 25rpx;
}

作用样式： 多行
           width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
}
          单行{
           width: 150px;
            /* 这个单词的意思是如果文字显示不开自动换行 */
            /* white-space: normal; */
            /* 1.这个单词的意思是如果文字显示不开也必须强制一行内显示 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3. 文字溢出的时候用省略号来显示 */
            text-overflow: ellipsis;
}
           

// 取消scroll-view组件滚动条
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}


//修改浏览器滚动条样式
::-webkit-scrollbar {
    width: 4px;
    // background-color: #999999;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #999999;
}

::-webkit-scrollbar-track {
    background: #303642;
}

background-size的使用
基本语法：background-size: length | percentage | cover | contain; 
一：length
    该属性值是设置背景图像的宽度和高度的，第一个值是宽度，第二个值是设置高度的。如果只设置第一个值，那么第二个值会自动转换为 “auto”;
二：percentage
     该属性是以父元素的百分比来设置图片的宽度和高度的，第一个值是宽度，第二个值是高度。如果只设置一个值，那么第二个值会被设置为 “auto”;
三：cover
      把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
四：contain
      把图像扩展至最大尺寸，以使宽度和高度 完全适应内容区域。

[点击查看](https://www.cnblogs.com/tugenhua0707/p/5260411.html)

background-position的使用
background-position: xpos ypos | x% y% | x y
CSS1中，background-position属性需要 2 个参数值，第一个值用于横坐标，第二个值用于纵坐标，默认值为 0% 0%，即背景图像的左上角与对象背景区域的左上角对齐。如果只提供一个值，则用于 x 轴方向，y 轴方向使用默认值 center，即垂直居中。

上述语法格式表明，背景图像有 3 种定位方式：

1）xpos ypos：表示使用预定义关键字定位，水平方向可选关键字有 left | center | right，垂直方向可选关键字有 top | center | bottom。
关键字定位，应用的是对齐规则，而不是坐标规则。xpos 为 left 表示图像的左边与对象的左边对齐，为 right 表示图像的右边和对象的右边对齐；ypos 为 top 表示图像的顶部和对象的顶部对齐，为 bottom 表示图像的底部和对象的底部对齐；xpos、ypos等于 center表示图像在水平和垂直方向的中心，和对象在水平和垂直方向的中心对齐，即。

依然使用前面的背景图案 bg.gif，其尺寸为 100px * 100px，对象的尺寸为 200px * 200px，背景图像的位置使用预定义关键字定位。如：
2）x% y%：表示使用百分比定位，是将图像本身（x%, y%）的那个点，与背景区域的（x%, y%）的那个点重合。最终得到背景图像起始位置坐标的计算公式为：
x = (对象的宽度 - 图像的宽度) * x%;
y = (对象的高度 - 图像的高度) * y%;

3）x y：表示使用长度值定位，是将背景图像的左上角，放置在对象的背景区域中（x, y）所指定的位置，即 x, y 定义的是背景图像的左上角，相对于背景区域左上角的偏移量。
偏移量长度可以是正值，也可以是负值。x 为正值表示向右偏移，负值表示向左偏移；y 为正值表示向下偏移，负值表示向上偏移。背景图像发生移动后，就有可能超出对象的背景区域。此时，超出的部分将不会显示，只会显示落入背景区域的部分。
如果把上面的例子改为长度值定位，要使背景图像居中，只需把背景图像的位置设置为50px 50px 即可。它就表示背景图像的左上角顶点，相对于对象背景区域的左上角顶点在 x轴右移 50px，在 y 轴下移 50px。得到的结果依然是背景图像位于对象的中央。

4）在CSS3中，background-position属性支持 4 个参数值，前两个值用于横坐标，后两个值用于纵坐标。这意味着我们可以相对于上左下右任意一个角落定位，而不是之前只能相对于左上角定位。可以用长度值、或百分比来指定背景图像的起始位置。

如果只提供一个值，则第二个值为center。如果提供两个值，第一个长度或百分比表示水平偏移，第二个长度或百分比表示垂直偏移。长度或百分比，表示背景图像的左上角相对于背景位置区域左上角的偏移。如，下面几个声明给出了背景的起点相对于背景区域左上角的偏移：

background-position: left 10px top 15px; /* 10px, 15px */
background-position: left top ; /* 0px, 0px */
background-position: 10px 15px; /* 10px, 15px */
background-position: left 15px; /* 0px, 15px */
background-position: 10px top ; /* 10px, 0px */
background-position: left top 15px; /* 0px, 15px */
background-position: left 10px top ; /* 10px, 0px */

[点击查看](https://blog.csdn.net/ixygj197875/article/details/79333151)

//如果是手机打开，则跳转H5端
function isPc(){		    
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
                    /*window.location.href="你的手机版地址";*/				
                }
                else {
                    /*window.location.href="你的电脑版地址";    */
                }
            }

 // 返回顶部
methods: {
    backTop() {
      // 实现滚动效果
      const timeTop = setInterval(() => {
        let top = document.documentElement.scrollTop || document.body.scrollTop;
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
  },

// 监听鼠标滚动事件
 mounted() {
    window.addEventListener("scroll", () => {
      if (
        document.documentElement.scrollTop >= 500 ||
        document.body.scrollTop >= 500
      ) {
        this.navAddClass = true;
      } else {
        this.navAddClass = false;
      }
    });
  },



vscode 列编辑 ：alt+shift+鼠标左键
hubilderx  alt+鼠标左键
快速生成@param注释
 先保存函数，再在函数头写/**+enter就行了

vscode左边侧边栏字体的大小:
通过ctrl+shift+ + 来进行放大操作，用ctrl+shift+ - 可以缩小，还是相当的适用的。

swiper cdn
<script src='https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js'><\/script>
@import url("https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css");

小程序id：wxf38d299033c6d34c