小程序中,在子组件中使用触底刷新,触底加载
场景:在父组件A中引入子组件 a,然后在a中需要触底加载列表,在a中使用onReachBottom方法不生效
解决方案:
在父组件中的onReachBottom里面暴露一个方法,然后在子组件中的mounted方法里面进行监听该方法名,从而达到触底执行获取列表方法。
父组件:
子组件:
小程序中,子组件的onShow和onLoad方法不生效
场景:在父组件中引入子组件,结果子组件中的onShow和onLoad方法不生效
原因:在uniapp中,只有项目生命周期和页面生命周期,而onLoad和onShow属于页面生命周期,所以在组件中不会调用。
解决方案:在子组件中使用mounted
el-input的type=number的时候,去掉后面的箭头
<el-input type="number"></el-input>
<style lang="scss">
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
}
/deep/ input[type="number"] {
-moz-appearance: textfield !important;
}
</style>
vue中v-if和v-show与display:none和visibility: hidden的区别
1、v-if、v-show、display:none都是网页中不占据位置的隐藏;visibility: hidden只是单纯的隐藏元素,但是还是占据位置
2、v-if设置为false的时候,元素是没有实际渲染的,如下图:
所以如果使用频繁的话就使用v-show,因为原理是切换css的display,所以切换消耗比较低,但是初始化会渲染;v-if的切换需要重新渲染,代价太大,如果是不频繁使用的话就用v-if,因为初始化为false的话元素就不会渲染。