原生小程序踩坑

基础库版本2.10.1

1. 使用hidden无效

<div hidden="true">隐藏的</div>

说明:

由于是H5代码迁移所以存在很多div标签,由于比较懒所以没转成view,在使用hidden属性的时候遇到了问题,不会隐藏。

思考:

view标签可以使用hidden隐藏,除了标签特性还有自带的样式处理view[hidden] display: none;,因此我加了div[hidden] display: none;,结果是仍然无效。既然这样是不是其他的操作也会无效呢?于是经过测试,给div绑定事件bindtap,结果是有效;使用wx:if,结果有效。结语,最好不要使用div标签,使用官方提供的组件标签,以免出现不必要的问题。

2. scroll-viewscroll-into-view失效

<scroll-view scroll-y="true" class="scroll" scroll-into-view="{{scrollViewId}}" scroll-with-animation="true" >
  <view>动态增加内容</view>
  <view hidden="{{flag}}">动态切换出现隐藏</view>
  <view hidden="{{!flag}}">动态切换出现隐藏</view>
  <view id="{{scrollViewId}}"></view>
</scroll-view>

说明:

动态增加内容的部分会每次增加内容(包含组件),动态切换出现隐藏的两个部分交替出现和隐藏,每次变化同时进行1.内容增加;2.切换显示隐藏内容;3.id动态变化,可以正常的带有动画的滚动两次,之后就出现问题了,不能滚动到底部,有点灵异。

思考:

很多时候scroll-view有问题是因为1.没有给标签高度(很多说要固定高度,不要百分比)2.scroll-into-viewid要动态设置。以前做项目时候发现要给固定高度的,不能是百分比,但是这次遇到给的百分比高度,id动态设置,可以正常的带有动画的滚动两次,说明百分比的高度并没有问题。问题的突破点在于可以正常的滚动两次,两次之后通过hidden控制的标签都显示过,下次显示不会造成’重绘‘(自己猜想假设的词,不知道小程序内部原理,不重绘造成的scroll-view标签不会重新计算这个显示内容的正确高度),因此出现了只会滚动一段但是不会到底部的现象。处理方法是把hidden替换成wx:if

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章