欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp中獲取dom元素的方法及更改dom元素顏色踩坑記錄

 更新時(shí)間：2023年03月18日 11:21:27   作者：北海的大魚  
最近學(xué)到了一個(gè)比較好用的框架uni-app,可以做六端適配,學(xué)習(xí)一下,下面這篇文章主要給大家介紹了關(guān)于uniapp中獲取dom元素的方法及更改dom元素顏色踩坑記錄的相關(guān)資料,需要的朋友可以參考下

前言

最近寫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)信息的對象

可以在這個(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寫對應(yīng)的樣式，并且可以在js邏輯中對樣式進(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ù)對應(yīng)的距離跳到指定的滾動(dòng)高度

uni.pageScrollTo({
    scrollTop: res里面距離最上的距離(如res.top) 
})

總結(jié)

到此這篇關(guān)于uniapp中獲取dom元素的方法及更改dom元素顏色的文章就介紹到這了,更多相關(guān)uniapp獲取dom元素的方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論