我们知道常用的居中对齐方式有很多种例如:
text-align:center;
align-items:center;
justify-content: center;
margin: auto; #子容器在父容器中居中
但是在view中的文字对齐却不能简单的使用text-align: center;来实现,这种办法只能实现文字的水平居中,
要实现水平垂直居中
可使用如下方案 给父元素添加以下代码即可
.td {
display: flex;
align-items: center;
justify-content: center;
}
使用了flex布局控制其中的文字水平和垂直居中
弹框出现禁止滚动:
弹出 fixed 弹窗后,在弹窗上滑动会导致下层的页面一起跟着滚动。
解决方法:
在弹出层加上 catchtouchmove 事件
示例代码:
<view class="modal-view" hidden="{{!showModal}}" bindtap="toggleModal" catchtouchmove="preventTouchMove">
<view class="modal">
<view class="modal-item" catchtap="makePhoneCall">{{site.phone}}</view>
<view class="modal-item" catchtap="toggleModal">取消</view>
</view>
</view>
Pages({
preventTouchMove() {}
})
在电脑上测试是没有用的,这是触摸事件。因此,需要在手机端测试,预览生成一个开发版,用手机微信扫描即可看到效果。
还有一种方法如下:给catchtouchmove=“ture”
<view class="modal-view" hidden="{{!showModal}}" bindtap="toggleModal" catchtouchmove="ture">
<view class="modal">
<view class="modal-item" catchtap="makePhoneCall">{{site.phone}}</view>
<view class="modal-item" catchtap="toggleModal">取消</view>
</view>
</view>