這篇文章主要介紹了uniapp中獲取dom元素及更改dom元素顏色的方法是什么的相關(guān)知識,內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇uniapp中獲取dom元素及更改dom元素顏色的方法是什么文章都會有所收獲,下面我們一起來看看吧。
SelectorQuery是查詢節(jié)點(diǎn)信息的對象
可以在這個(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
直接動態(tài)綁定style來修改樣式
例如:
然后在boxStyleDefault1寫對應(yīng)的樣式,并且可以在js邏輯中對樣式進(jìn)行修改,這種方法在h6,app和小程序中均適用,不用考慮兼容性的問題。
看來在開發(fā)中多查閱官方文檔能夠少走很多彎路,特別是uniapp在各端兼容性上的問題,要看清楚適用哪些端,避免浪費(fèi)過多的時(shí)間再爬坑找問題解決問題上
自己寫的時(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ù)對應(yīng)的距離跳到指定的滾動高度
uni.pageScrollTo({ scrollTop: res里面距離最上的距離(如res.top) })
關(guān)于“uniapp中獲取dom元素及更改dom元素顏色的方法是什么”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“uniapp中獲取dom元素及更改dom元素顏色的方法是什么”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。