前端知识杂烩(偏向uniapp小程序)

115 阅读3分钟

css的width=100%和width=100vw有什么区别?

100%包含了滚动条,100vw没有包含滚动条。当页面没有滚动条时,两者的宽度相同。

项目中的依赖有用到node-sass包,一定要看看自己的nodejs版本

可以看看这个链接,node-sass的版本哪些node版本能使用。

github.com/sass/node-s…

小程序开发工具上输入框能触发focus事件,但是不能看见聚焦闪烁的光标

原因为开发工具上显示有问题。真机调试则没有问题

radio单选框的value值是string类型

不能是数字

mounted 和 onLoad生命周期钩子有什么区别?onLoad和onShow执行的先后顺序?

mounted是组件级的生命周期钩子,onLoad是页面级的生命周期钩子,不能混用。

onLoad先执行,然后再是onShow执行。

forEach和for循环有什么区别?

forEach里break无效。

在组件上直接写一些class类不会生效。

小程序不一样点,每个组件下面都有一个#shadow-root节点。

reactive结合Object.assign使用不会触发响应式

    const msg = reactive({})

    setTimeout(()=>{
        Object.assign(msg, {a:2})
    },2000)
    
    watch(msg,()=>{
        console.log(123) // 这里可能不会打印
    })

解决:这应该是bug,最新版的vue就没有这个问题

原生组件能覆盖一些普通组件

利用这一点可以把页面内容写在原生组件里(比如scroll-view),覆盖作为背景图的普通组件。

不要在模板上做太多判断,可能会意想不到的出现问题

比如响应式不能更新了。

scroll-view的子元素显示不全问题

scroll-view组件一定要给它一个确定的高度或宽度。或者使用flex布局配合flex: 0 0 auto;和flex: 1 1 auto;给它一个高度。

<template>
    <view style="height: 100%;display: flex;flex-direction: column;">
        <view style="height: 100px;flex: none;"></view>
        <scroll-view style="height: 0;flex: 1" scroll-y>
           <view v-for="(item,index) in 100" style="height: 50px;border:1px solid #000;">{{item}}</view>
        </scroll-view>
    </view>
</template>
<style>
    page {
            height: 100%;
    }
</style>

screenHeight和windowHeight的区别?

screenHeight是整个手机屏幕的高度,包括状态栏、导航栏、tabbar。

windowHeight是webview的高度(都以w开头,不包括手机的状态栏、导航栏、tabbar)。

单位也不同,screenHeight是rpx,windowHeight是px。

loadash的uniq函数

创建一个去重后的array数组副本。只有第一次出现的元素才会被保留。

_.uniq(array)

页面怎么复用?

直接跳转到当前页面。

vue的template模板上不能使用可选链

选择使用lodash的get方法。例如

<view v-if="get(couponDetailState, 'coupon.couponUseUserName')"></view>

但是这好像会导致触发不了响应式。

vue中的computed、props、methods、data、watch选项的执行顺序?

image.png

省略号css样式不生效问题

需要文本的父元素需要固定宽度,所以可以将flex:1和width:0配和使用。

文本换行

第一行内容\r\n第二行内容\r\n第三行内容\r\n第四行内容

解决滚动条影响页面宽度问题

在最外层盒子加:margin-right: calc(100% - 100vw);

还可以直接设置宽度为100vw

文字排版问题

有些文字换行后父元素会撑高,可以给父元素设置一个固定高度。