uni-app中 document 替换实现

目标：实现一个 点击目标区域展示对应内容

因为手机端没有 document对象，那只能通过绑定class配合三目运算符实现。实现

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

通过方法 动态修改变量 sel_ID 来实现是否显示相关区域

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