目录

问题：获取this.$refs为空对象或者为undefined

原因一：在uniapp中，非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text）

解决方法：ref在非H5端使用在自定义的组件

原因二：使用了版本过低的调试基础库

原因三：ref组件使用了条件渲染，即v-if、v-show，这些DOM节点在mounted无法被访问到,详细可以看 深入响应式原理-Vue.js

原因四：使用了v-for循环动态绑定ref（大部分时请求后端数据动态渲染DOM），this.$ref[name]获取的是数组，详情看ref属性-Vue.js

扩展场景：uni-app的H5/小程序实现锚点

---

问题：获取this.$refs为空对象或者为undefined console.log(this.$refs) // {} 原因一：在uniapp中，非H5端只能用于获取自定义组件，不能用于获取内置组件实例（如：view、text） <view ref="viewRef"></view> <text ref="viewRef"></text> // js console.log(this.$refs) // n内置组件获取不到ref{} 解决方法：ref在非H5端使用在自定义的组件 <jz-loading ref="loading"></jz-loading> //js console.log(this.$refs['loading']) // 输出实例

原因二：使用了版本过低的调试基础库

解决办法：切换至高版本基础库即可

原因三：ref组件使用了条件渲染，即v-if、v-show，这些DOM节点在mounted无法被访问到,详细可以看 深入响应式原理-Vue.js

解决办法：使用this.$nextTick(() => {})方法在渲染完成后获取ref

mounted() { // 操作数据. ....... this.$nextTick(()=>{ console.log(this.$refs[name]) // 输出实例 }) }

原因四：使用了v-for循环动态绑定ref（大部分时请求后端数据动态渲染DOM），this.$ref[name]获取的是数组，详情看ref属性-Vue.js

?解决办法:

由this.$refs[name]改为this.$refs[name][0]

扩展场景：uni-app的H5/小程序实现锚点

实现方法（H5端）：H5实现方法比较简单，获取ref组件实例的$el的offsetTop属性

methods:{ handleScrollTo(name){ //H5 uni.pageScrollTo({ scrollTop: this.$refs[name][0].$el.offsetTop, duration: 100 }); } }

实现方法（小程序端）：小程序端使用this.$refs[name][0].$el.offsetTop会发现找不到$el属性

原因是$el只支持H5端?

针对小程序我们可以用节点查询，使用uni.createSelectorQuery() 和uni.createSelectorQuery().selectViewport().scrollOffset()查询节点信息

?

附实现思路，拿到需要锚点组件的相对坐标top，再获取当前屏幕的滚动距离scrollTop?

scrollTop - Math.abs(top) 则得出需要滚动到锚点所需距离

const query = uni.createSelectorQuery().in(this) query.select(`#${id}`).boundingClientRect(data => { console.log(data) // 返回节点的相对坐标信息top、bottom等 //查询当前屏幕的滚动位置等信息 uni.createSelectorQuery().selectViewport().scrollOffset(res => { uni.pageScrollTo({ scrollTop: res.scrollTop - Math.abs(data.top), duration: 100 }); }).exec(); }).exec();

如果文章帮助到大家，可以点赞评论收藏~

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。