1. 程式人生 > >微信小程式1rpx border ios真機顯示不全問題分析及解決方案

微信小程式1rpx border ios真機顯示不全問題分析及解決方案

微信小程式在iphone6或6p真機上如果有一排有邊框的標籤時,可能會出現個別邊框顯示不全的問題,下面進行一步一步分析

1.頁面內容如下

wxml內容:

<view class='title'> 您喜歡下面那個公司?</view><view class='label-con'> <view class='label'>中國移動</view> <view class='label'>蘇寧</view> <view class='label'>阿里巴巴</view> <view class
='label'>華為</view></view>

wxss內容如下

.title{ width: 90%; font-size: 30rpx; color: #333; margin: 30rpx auto;}.label-con{ width: 696rpx; height: 60rpx; font-size: 28rpx; color: #01b5b5; margin: 0 auto;}.label{ height: 60rpx; line-height: 60rpx; border: 1rpx solid #01b5b5; float: left; border-radius:
10rpx; padding: 0 20rpx; margin-right: 16rpx; margin-bottom: 16rpx;}

2.在iphone6p上顯示效果如下圖


3.經過測試得來一組資料

 注意步驟1中加粗的文.label-con類中width:696rpx,將標籤的父容器寬度設定為下面的值都會出現這個692 693 696 697 700 701 704 705 708 709,

那麼會發現個規律,如下表:

4.分析結果

當標籤的父容器寬度(單位rpx)÷2的值為偶數或偶數.5的時候會出現該bug,那麼我們可以推到出用200.5*2=401,302*2=604等等都會重現這個bug,

那麼解決方案就來了:

1)第一種方式是設定標籤父容器的寬度到無bug值,即(奇數或奇數.5)*2,例如281*2rpx,281.5*2rpx可以解決;

2)第二種方式是補充畫素單位:

步驟1中wxml增加space的view後如下:

        <view class='label-con'>     <view class='space'></view>         <view class='label'>中國移動</view>         <view class='label'>蘇寧</view>         <view class='label'>阿里巴巴</view>         <view class='label'>華為</view>        </view> 步驟1中wxss中增加space類為:        .space{         width: 1rpx;         height: 100%;         float: left;        } 以上兩種方式即可解決該問題,歡迎討論,更多關於微信公眾號、企業號、小程式開發問題請加入個人qq群378615653,我在群裡回覆諸位。