目录

问题:获取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();
     

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

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐