- 底部输入框获取焦点上推页面
1.首先在wxml的输入框里面添加adjust-position="{{false}}" 2.监听focus事件,通过获取e.detail.height(即弹出的软键盘的高度), 把input的输入框的bottom=e.detail.height * 2 + 'rpx';还须把content 的内容高度减去键盘的高度(值须setData下)。 3.监听失焦(blur)事件,在该方法里,把input输入框的bottom重置为0; 且内容高度为原本的内容高度即可(值须setData下)。 以上三步可完美解决
2018-08-07 - 微信小程序swiper高度动态适配
ps:没有在[代码]swiper[代码]中添加[代码]scroll-view[代码]是为了可以使用页面的下拉刷新,最终方法直接跳到方案四。(含代码片段) 初始方案 [代码]swiper[代码]高度固定,[代码]swiper-item[代码]默认绝对定位且宽高100%,每个[代码]swiper-item[代码]中内容由固定高度的child组成,然后根据child数量动态计算[代码]swiper[代码]高度,初始方案(由于rpx针对屏幕宽度进行自适应,[代码]child_height[代码]使用[代码]rpx[代码]方便child正方形情况下自适应): [代码]swiper_height = child_height * child_num[代码]屏幕效果仅在宽度375的设备(ip6、ipⅩ)完美契合,其他设备都底部会出现多余空隙,并且在上拉加载过程中,随着内容增加,底部空隙也逐渐变大。 [图片] 方案二 开始以为是[代码]rpx[代码]适配显示问题,后通过文档中描述的WXSS 尺寸单位转化rpx为px([代码]child_height[代码]使用[代码]rpx[代码]): [代码]swiper_height = child_height * child_num * ( window_width / 750 )[代码]然后并无变化,我们可以看到[代码]child_height[代码]在不同宽度屏幕下,显示的宽高尺寸是不一样的([代码]px[代码]单位),那就尝试使用box在各个屏幕的实际高度进行计算[代码]swiper[代码]高度,box的高度可以单独在页面中增加一个固定标签,该标签样式和box宽高保持一致并且隐藏起来,然后在[代码]page[代码]的[代码]onload[代码]中通过wx.createSelectorQuery()获取标签实际高度[代码]baseItemHeight[代码]([代码]px[代码]单位): [代码]swiper_height = baseItemHeight * child_num[代码]结果显示原本的ip6、ipⅩ没有问题,另外宽带小于375的ip5上也ok,但是在大于375的设备上还是出现空隙,比如ip的plus系列。 方案三 之前的方案都无法计算出合适的[代码]swiper[代码]高度,那就换个思路,比如去计算空隙的高度。 [代码]swiper[代码]底部有一个load标签显示“加载更多”,该标签紧贴box其后,通过[代码]wx.createSelectorQuery()[代码]来获取[代码]bottom[代码],然而你会发现[代码]bottom[代码]是标签的[代码]height[代码]加[代码]top[代码]的和。计算底部空隙(暂时忽略“加载更多”标签高度): [代码]space_height = swiper_height - load_top[代码]刚计算完可以看到在静止状态下,计算出[代码]space_height[代码]拿去修改[代码]swiper_height[代码]显示空隙刚好被清掉了,但是接着就发现在动过程中获取到的[代码]bottom[代码]是不固定的,也就是说数值可能不准确导致[代码]space_height[代码]计算错误,显示效果达不到要求。 方案四 基于上述方案,[代码]swiper[代码]底部的load标签绝对定位[代码]bottom:0[代码],同时在[代码]swiper[代码]底部添加一个高度为0并且尾随内容box其后的标签(mark),然后获取这两个标签的top值之差: [代码]space_height = load_top - mark_top[代码][图片] 代码片段 这次获取到的空隙高度用于再计算[代码]swiper[代码]高度完美契合,美滋滋!!!
2018-05-23