前端开发 css js 部分写法整理

1.导航栏整体（前景、背景）透明设置
"style": {
"navigationBarTitleText": "登录",
"transparentTitle": "auto", //导航栏整体（前景、背景）透明设置
}

2.页面变灰处理
html { filter: grayscale(100%);}     app.vue 页面变灰

3.页面跳转传参对象处理
const param = {
 groups: JSON.stringify(this.groups),
 uinfo: JSON.stringify(this.uinfo)
}
目标页面使用JSON.parse()

4.去掉最后列表下边框
&:last-child {
   border-bottom: none;
 }

5.设置元素是否对鼠标事件做出反应
 .no-hover-class {
     pointer-events: none;
  }

6.letter-spacing增加或减少字符间距
letter-spacing:4rpx; 属性增加或减少字符间的空白（字符间距）  若使用负值，这会让字母之间挤得更紧。

7.文本一行，超出省略号...
overflow: hidden;
white-space: nowrap; 
text-overflow: ellipsis;

8.文本多行，超出省略号...
text-overflow: -o-ellipsis-lastline;
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
display: -webkit-box; //特别显示模式
-webkit-line-clamp: 2; //行数
line-clamp: 2;
-webkit-box-orient: vertical;

9.奇数偶数选择器
nth-child(odd)和:nth-child(even)

10.子元素不缩小
flex-shrink: 0

11.距离计算
.page{
   padding-bottom: calc(var(--window-bottom) + 230rpx);
}

12.检测字符串是否以指定的子字符串开始
startsWith() 如果是以指定的子字符串开头返回 true，否则 false。
startsWith() 方法对大小写敏感。

13. js 取随机数
0<=Math.random() <1    //浮点数
0<=Math.floor(Marh.random()*6)<6   //整数

14.js数组转字符串用逗号隔开
arr.join()

15.去除输入空格
v-model.trim="money"

16.阻止事件继续传播
@tap.stop  @click.stop

17. 数据过滤 返回新数据
this.images.map(e => {
     return {
         name: 'upfiles[]',
         uri: e,
      }
})

18.js查找 和过滤方法
this.images.splice(index, 1)
this.imgList = (imgList || []).filter(img => img != item)
index = this.list.findIndex(e => e.recommend)
this.packages = (packages || []).filter(item =>item.rmbprice!= '0.00')

19.处理数据null 异常报错问题
let a=obj?.b?? ' default值 '

20.动态样式 写法
:class="['name', navIndex == index ? 'checked' : '']"
:class="{'super': nightMode}"
:class="'item' + (item.response.length > 1 ? ' item4' : ' item1')"
:class="`rank-num color${index}`"
:style="{'border-color':colors[index%6]}"
:style="{color:navIndex==index?'#4F76F5':''}"
:style="{ width: `${templateOptions.size / 4}px`, height: `${templateOptions.size / 4}px` }"

:src="'/static/image/icon-grade' + item.user.vip + '.png'"
:src="`/static/image/icon-grade${vip}.png`"
:src="`${resourceUrl}${item}`"

21.在DOM更新后执行某些操作，确保获取到的是最新的DOM状态
this.nextTick()  当你修改了数据后，想要获取更新后的DOM元素的高度或宽度，或者进行其他依赖于最新DOM状态的操作时，可以使用this.nextTick()。

22.定时器的使用
this.timer = setInterval(function() {
           //定时执行内容
}, 3000)
//清除定时器
if (this.timer) {
     clearTimeout(this.timer)
     this.timer = null
}