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

来源：oschina

链接：https://my.oschina.net/qingqingdego/blog/3275709

标签

Amp