Implémentation de remplacement de document dans uni-app

Objectif: réaliser un clic sur la zone cible pour afficher le contenu correspondant

Parce qu'il n'y a pas d'objet document sur le téléphone mobile, il ne peut être atteint qu'en liant la classe avec l'opérateur trinoculaire. Atteindre

                    <view class="dream_data_li" v-for="(item,index) of list" :key="index"> <label class="name">梦到:&nbsp;&nbsp;{{item.title}}</label> <label class="value">{{item.desc}}<label class="more" @click="fun_show_more(item)">更多...</label></label> <view :id="'ID'+item.id" class="desc" v-bind:class="[(sel_ID==item.id) ? 'showdesc' : '']"> {{item.all}} </view> </view> <style> .dream_data_li>.desc { /* margin-left: 120px; */ display: none; font-size: 14px; padding-right: 10px; background-color: #cdffc1; padding: 5px; box-shadow: 10px 10px 10px #cacaca; border-radius: 5px; } .dream_data_li>.showdesc { display: block !important; } </style>

Grâce à la méthode pour modifier dynamiquement la variable sel_ID pour déterminer s'il faut afficher la zone pertinente

           fun_show_more:function(item){
				// console.log(item);
				// document 这个是浏览器端的,APP端没有的 // document.getElementById('ID'+item.id).style.display='block'; this.sel_ID=item.id; // 有BUG // setTimeout(() => { // // const query = uni.createSelectorQuery().in(this); // const query = uni.createSelectorQuery(); // console.log(query); // query.selectAll('#ID'+item.id).boundingClientRect(data => { // console.log("得到布局位置信息" + JSON.stringify(data)); // console.log("节点离页面顶部的距离为" + data.top); // // console.log("节点离页面顶部的距离为" + data.top); // console.log(data); // }).exec(); // },200); }