• 111541

    文章

  • 803

    评论

  • 12

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

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

 


695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

0条评论

Loading...


自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客