微信公开课
微信公开课小程序热门讨论关于「如何查看小程序的真实DOM」的小程序开发问题
补充:比如我有一个小程序的checkboxgroup如下checkboxgroupbindchange=facilitiesChangecheckboxwx:for={{facility_list}}wx:key=thisvalue={{item}}class=listcheckboxiconfonticon{{item}}text{{facilit
展开:比如我有一个小程序的checkboxgroup如下:<checkboxgroupbindchange=facilitiesChange<checkboxwx:for={{facility_list}}wx:key=*thisvalue={{item}}class=listcheckboxiconfonticon{{item}}<text{{facility_name[index]}}<text<checkbox<checkboxgroup同时我有一段对应的样式文件是:wxcheckboxinput{display:none;}listcheckbox{width:100rpx;height:100rpx;fontsize:60rpx;lineheight:100rpx;color:eee;textalign:center;}listcheckboxtext{fontsize:24rpx;fontweight:600;whitespace:nowrap;}listcheckbox[checked]{color:9e9e9e;}但是实际显示效果不是预想的:可以发现这里的空白是很特别的但是如果查看DOM结构会发现只有这两个:这是母元素checkbox这是子元素text很明显的,这不是真实的DOM结构在这种情况下要对元素进行样式就很困难,因为不知道真实的结构有没有办法强行查看真实DOM结构呢PS顺便说明一下,如果用view而不是checkoubox:<viewwx:for={{facility_list}}wx:key=*thisvalue={{item}}class=listcheckboxiconfonticon{{item}}style=display:inlineblock<text{{facility_name[index]}}<text<view这时候显示的效果应该是这样的:即速小程序:审查元素
更多有关「如何查看小程序的真实DOM」的讨论可以前往微信公开课小程序参与互动哦!了解更多