首頁 > 軟體

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

2023-03-19 06:02:21

前言

最近寫uniapp,遇到一個需要獲取到頁面中dom元素,我第一反應是使用this.$ refs進行獲取,於是我開心的使用this.$refs寫了很多程式碼,使用h5偵錯的過程中沒有發現任何問題,但後來真機偵錯的時候發現在app端無效,於是我檢視檔案發現了:

非H5端只能用於獲取自定義元件,不能用於獲取內建元件範例(如:view、text

使用uni.createSelectorQuery()

SelectorQuery是查詢節點資訊的物件

可以在這個範例上使用 select 等方法選擇節點,並使用 boundingClientRect 等方法選擇需要查詢的資訊。

比如使用selectorQuery.in(component)

const query = uni.createSelectorQuery().in(this);
query.select('#id').boundingClientRect(data => {
  console.log("得到佈局位置資訊" + JSON.stringify(data));
  console.log("節點離頁面頂部的距離為" + data.top);
}).exec();

這樣就能獲取該dom結點的資訊,比如:

除此之外還可以檢視關於SelectorQuery的更多用法,詳情見官網檔案 SelectorQuery

直接動態繫結style來修改樣式

例如:

然後在boxStyleDefault1寫對應的樣式,並且可以在js邏輯中對樣式進行修改,這種方法在h5,app和小程式中均適用,不用考慮相容性的問題。

看來在開發中多查閱官方檔案能夠少走很多彎路,特別是uniapp在各端相容性上的問題,要看清楚適用哪些端,避免浪費過多的時間再爬坑找問題解決問題上

附:ni-app獲取DOM元素資訊及跳到指定位置

自己寫的時候看了很多別人說的感覺一下看了難理解,所以整理一下

獲取DOM元素資訊

這裡你想獲取哪個的資訊把id="target"或類放到哪裡

<template>
    <view>
        <view >
        <view>Html</view>
        <view id="target">Css</view>
        <view">Javascript</view>
    </view>
</template>

一定要注意,獲取要放在onReady或mounted裡(建義放onReady因為用的uniapp)

<script>
    export default {
        onReady(){// 注意:想要拿到元素範例,需要在範例已經掛載到頁面上才可以
            this.getInfo()
        },
        methods: {
            getInfo() {
                const query = uni.createSelectorQuery().in(this);
                query.select('#target').boundingClientRect(data => {
                    console.log(data)
                }).exec();
            }
        }
    };
</script>

跳到指定位置

封裝獲取方法然後全域性匯入

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里根據類名獲取這個DOM的上下距離資訊

onReady(){
    this.$Tool.getRect(".Html").then(res => {
         console.log(res) //res裡有各屬性資訊
    })
},

然後根據對應的距離跳到指定的捲動高度

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

總結

到此這篇關於uniapp中獲取dom元素的方法及更改dom元素顏色的文章就介紹到這了,更多相關uniapp獲取dom元素的方法內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com!


IT145.com E-mail:sddin#qq.com