工作问题日志-CSDN博客

本文链接：https://blog.csdn.net/scclp/article/details/132407368

文章讲述了在小程序开发中遇到的问题，如子组件onReachBottom方法失效、onShow和onLoad未执行，以及如何调整el-input的number类型箭头和v-if/v-show与display:none/visibility:hidden的性能差异。

摘要由CSDN通过智能技术生成

小程序中，在子组件中使用触底刷新，触底加载

场景：在父组件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的话元素就不会渲染。