uniapp中獲取dom元素的方法及更改dom元素顏色踩坑記錄
前言
最近寫(xiě)uniapp，遇到一個(gè)需要獲取到頁(yè)面中dom元素，我第一反應(yīng)是使用this.$ refs進(jìn)行獲取，于是我開(kāi)心的使用this.$refs寫(xiě)了很多代碼，使用h5調(diào)試的過(guò)程中沒(méi)有發(fā)現(xiàn)任何問(wèn)題，但后來(lái)真機(jī)調(diào)試的時(shí)候發(fā)現(xiàn)在app端無(wú)效，于是我查看文檔發(fā)現(xiàn)了：
非H5端只能用于獲取自定義組件，不能用于獲取內(nèi)置組件實(shí)例（如：view、text
使用uni.createSelectorQuery()
SelectorQuery是查詢(xún)節(jié)點(diǎn)信息的對(duì)象
可以在這個(gè)實(shí)例上使用 select 等方法選擇節(jié)點(diǎn)，并使用 boundingClientRect 等方法選擇需要查詢(xún)的信息。
比如使用selectorQuery.in(component)
const query = uni.createSelectorQuery().in(this);
query.select('#id').boundingClientRect(data => {
console.log("得到布局位置信息" + JSON.stringify(data));
console.log("節(jié)點(diǎn)離頁(yè)面頂部的距離為" + data.top);
}).exec();
這樣就能獲取該dom結(jié)點(diǎn)的信息，比如：
除此之外還可以查看關(guān)于SelectorQuery的更多用法，詳情見(jiàn)官網(wǎng)文檔 SelectorQuery
直接動(dòng)態(tài)綁定style來(lái)修改樣式
例如：
然后在boxStyleDefault1寫(xiě)對(duì)應(yīng)的樣式，并且可以在js邏輯中對(duì)樣式進(jìn)行修改，這種方法在h5，app和小程序中均適用，不用考慮兼容性的問(wèn)題。
看來(lái)在開(kāi)發(fā)中多查閱官方文檔能夠少走很多彎路，特別是uniapp在各端兼容性上的問(wèn)題，要看清楚適用哪些端，避免浪費(fèi)過(guò)多的時(shí)間再爬坑找問(wèn)題解決問(wèn)題上
附：ni-app獲取DOM元素信息及跳到指定位置
自己寫(xiě)的時(shí)候看了很多別人說(shuō)的感覺(jué)一下看了難理解,所以整理一下
獲取DOM元素信息
這里你想獲取哪個(gè)的信息把id="target"或類(lèi)放到哪里
<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)掛載到頁(yè)面上才可以
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ù)類(lèi)名獲取這個(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ì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
深淺拷貝知識(shí)在我們的日常開(kāi)發(fā)中還算是用的比較多,下面這篇文章主要給大家介紹了關(guān)于javaScript深拷貝和淺拷貝的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
腳本吧 - 幻宇工作室用到j(luò)s,超強(qiáng)推薦expand.js
腳本吧 - 幻宇工作室用到j(luò)s,超強(qiáng)推薦expand.js...2006-12-12
微信二次分享報(bào)錯(cuò)invalid signature問(wèn)題及解決方法
基于微信公眾號(hào)開(kāi)發(fā)的h5頁(yè)面（使用jssdk接口），由用戶(hù)A分享給用戶(hù)B，用戶(hù)B再次分享這個(gè)頁(yè)面時(shí)，不能成功分享。這篇文章主要介紹了微信二次分享報(bào)錯(cuò)invalid signature問(wèn)題及解決方法,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了ES6新特性之變量和字符串用法,結(jié)合具體實(shí)例形式分析了ES6中變量與字符串的特性、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-04-04
本文主要對(duì)JavaScript中promise的使用進(jìn)行詳細(xì)介紹。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
利用JavaScript編寫(xiě)一個(gè)簡(jiǎn)單的1024小游戲
在每年的10月24日,我們都會(huì)慶祝程序員節(jié),這是一個(gè)向所有辛勤工作、創(chuàng)造出無(wú)數(shù)令人驚嘆應(yīng)用和系統(tǒng)的程序員們致敬的日子,為了紀(jì)念這個(gè)特殊的日子,我們將通過(guò)編寫(xiě)一個(gè)簡(jiǎn)單的1024小游戲來(lái)向所有程序員們表示敬意,本文將詳細(xì)解釋如何使用JavaScript編寫(xiě)這個(gè)小游戲2023-10-10
js實(shí)現(xiàn)的頁(yè)面加載完畢之前l(fā)oading提示效果完整示例【附demo源碼下載】
這篇文章主要介紹了js實(shí)現(xiàn)的頁(yè)面加載完畢之前l(fā)oading提示效果,結(jié)合完整實(shí)例形式分析了js頁(yè)面加載時(shí)顯示loading效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了五種JavaScript判斷是否為整數(shù)類(lèi)型方式，需要的朋友可以參考下2015-12-12
JavaScript 可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。通過(guò)本文給大家介紹Javascript的表單驗(yàn)證-提交表單，對(duì)javascript表單驗(yàn)證，提交表單相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-03-03