css的width=100%和width=100vw有什么区别?
100%包含了滚动条,100vw没有包含滚动条。当页面没有滚动条时,两者的宽度相同。
项目中的依赖有用到node-sass包,一定要看看自己的nodejs版本
可以看看这个链接,node-sass的版本哪些node版本能使用。
小程序开发工具上输入框能触发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选项的执行顺序?
省略号css样式不生效问题
需要文本的父元素需要固定宽度,所以可以将flex:1和width:0配和使用。
文本换行
第一行内容\r\n第二行内容\r\n第三行内容\r\n第四行内容
解决滚动条影响页面宽度问题
在最外层盒子加:margin-right: calc(100% - 100vw);
还可以直接设置宽度为100vw
文字排版问题
有些文字换行后父元素会撑高,可以给父元素设置一个固定高度。