Document replacement implementation in uni-app

Goal: To achieve a click on the target area to display the corresponding content

Because there is no document object on the mobile phone, it can only be achieved by binding the class with the trinocular operator. achieve

                    <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>

Through the method to dynamically modify the variable sel_ID to achieve whether to display the relevant area

           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); }