uniapp中獲取dom元素的方法及更改dom元素顏色踩坑記錄
前言
最近寫uniapp,遇到一個(gè)需要獲取到頁面中dom元素,我第一反應(yīng)是使用this.$ refs進(jìn)行獲取,于是我開心的使用this.$refs寫了很多代碼,使用h5調(diào)試的過程中沒有發(fā)現(xiàn)任何問題,但后來真機(jī)調(diào)試的時(shí)候發(fā)現(xiàn)在app端無效,于是我查看文檔發(fā)現(xiàn)了:

非H5端只能用于獲取自定義組件,不能用于獲取內(nèi)置組件實(shí)例(如:view、text
使用uni.createSelectorQuery()
SelectorQuery是查詢節(jié)點(diǎn)信息的對(duì)象
可以在這個(gè)實(shí)例上使用 select 等方法選擇節(jié)點(diǎn),并使用 boundingClientRect 等方法選擇需要查詢的信息。
比如使用selectorQuery.in(component)
const query = uni.createSelectorQuery().in(this);
query.select('#id').boundingClientRect(data => {
console.log("得到布局位置信息" + JSON.stringify(data));
console.log("節(jié)點(diǎn)離頁面頂部的距離為" + data.top);
}).exec();
這樣就能獲取該dom結(jié)點(diǎn)的信息,比如:

除此之外還可以查看關(guān)于SelectorQuery的更多用法,詳情見官網(wǎng)文檔 SelectorQuery
直接動(dòng)態(tài)綁定style來修改樣式
例如:

然后在boxStyleDefault1寫對(duì)應(yīng)的樣式,并且可以在js邏輯中對(duì)樣式進(jìn)行修改,這種方法在h5,app和小程序中均適用,不用考慮兼容性的問題。
看來在開發(fā)中多查閱官方文檔能夠少走很多彎路,特別是uniapp在各端兼容性上的問題,要看清楚適用哪些端,避免浪費(fèi)過多的時(shí)間再爬坑找問題解決問題上
附:ni-app獲取DOM元素信息及跳到指定位置
自己寫的時(shí)候看了很多別人說的感覺一下看了難理解,所以整理一下
獲取DOM元素信息
這里你想獲取哪個(gè)的信息把id="target"或類放到哪里
<template>
<view>
<view >
<view>Html</view>
<view id="target">Css</view>
<view">Javascript</view>
</view>
</template>
一定要注意,獲取要放在onReady或mounted里(建義放onReady因?yàn)橛玫膗niapp)
<script>
export default {
onReady(){// 注意:想要拿到元素實(shí)例,需要在實(shí)例已經(jīng)掛載到頁面上才可以
this.getInfo()
},
methods: {
getInfo() {
const query = uni.createSelectorQuery().in(this);
query.select('#target').boundingClientRect(data => {
console.log(data)
}).exec();
}
}
};
</script>
跳到指定位置
封裝獲取方法然后全局導(dǎo)入
export default{
getRect(selector){
return new Promise((resolve) => {
let view = uni.createSelectorQuery().select(selector);
view.fields({
size: true,
rect: true,
scrollOffset:true
}, (res) => {
resolve(res);
}).exec();
})
}
}
main.js里直接
import Xxx from 'xxx.js'
Vue.prototype.$Xxx = Xxx
然后在onReady里根據(jù)類名獲取這個(gè)DOM的上下距離信息
onReady(){
this.$Tool.getRect(".Html").then(res => {
console.log(res) //res里有各屬性信息
})
},
然后根據(jù)對(duì)應(yīng)的距離跳到指定的滾動(dòng)高度
uni.pageScrollTo({
scrollTop: res里面距離最上的距離(如res.top)
})總結(jié)
到此這篇關(guān)于uniapp中獲取dom元素的方法及更改dom元素顏色的文章就介紹到這了,更多相關(guān)uniapp獲取dom元素的方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
layui實(shí)現(xiàn)下拉復(fù)選功能的例子(包括數(shù)據(jù)的回顯與上傳)
今天小編大家分享一篇layui實(shí)現(xiàn)下拉復(fù)選功能的例子(包括數(shù)據(jù)的回顯與上傳),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
腳本吧 - 幻宇工作室用到j(luò)s,超強(qiáng)推薦expand.js
腳本吧 - 幻宇工作室用到j(luò)s,超強(qiáng)推薦expand.js...2006-12-12
微信二次分享報(bào)錯(cuò)invalid signature問題及解決方法
基于微信公眾號(hào)開發(fā)的h5頁面(使用jssdk接口),由用戶A分享給用戶B,用戶B再次分享這個(gè)頁面時(shí),不能成功分享。這篇文章主要介紹了微信二次分享報(bào)錯(cuò)invalid signature問題及解決方法,需要的朋友可以參考下2019-04-04
利用JavaScript編寫一個(gè)簡(jiǎn)單的1024小游戲
在每年的10月24日,我們都會(huì)慶祝程序員節(jié),這是一個(gè)向所有辛勤工作、創(chuàng)造出無數(shù)令人驚嘆應(yīng)用和系統(tǒng)的程序員們致敬的日子,為了紀(jì)念這個(gè)特殊的日子,我們將通過編寫一個(gè)簡(jiǎn)單的1024小游戲來向所有程序員們表示敬意,本文將詳細(xì)解釋如何使用JavaScript編寫這個(gè)小游戲2023-10-10
js實(shí)現(xiàn)的頁面加載完畢之前l(fā)oading提示效果完整示例【附demo源碼下載】
這篇文章主要介紹了js實(shí)現(xiàn)的頁面加載完畢之前l(fā)oading提示效果,結(jié)合完整實(shí)例形式分析了js頁面加載時(shí)顯示loading效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-08-08

