微信小程序開發--寬爲百分百，頁面仍可左右滑動

　　這段時間小程序開發時，不少時候，但願內容充滿整個屏幕（高度、寬度100%），以下圖

　　

　　可是在設置 .followrecords-container{width:100%;} 後發現 手機在橫向上雖然頁面徹底展現了，可是部分手機的頁面卻能夠左右滑動(好像是溢出了同樣，頁面的右邊總有一塊白色區域)，這確定不是咱們須要的。你上下滑動是正常功能，若是是左右頁面切換，能滑動也是正常的，可是你這不是頁面切換，純粹就是右邊溢出了一部分，多出一條莫名的白色區域，致使的滑動，確定是不容許的。

解決辦法就是在樣式  .followrecords-container{width:100%;}  類裏面添加  

　　position: fixed;

寫成 ：

.followrecords-container{
    width: 100%;
    height: auto;
    flex-direction:column;
    display:flex;
    position: fixed;            /*就這特殊*/
    background-color:#ffffff;
}

 

wxml文件

<view class="followrecords-container">
    <view class="followrecords-textarea">
        <view class="followrecords-textarea-area">
            <textarea placeholder="請輸入跟進記錄......" maxlength="200" placeholder-style="color:red;" class="" value="{{textareaValue}}" bindblur="getData"/>
        </view>
    </view>
    <button bindtap="sureSubmit">肯定</button>

    <view class="shadowMask-modalDlg" wx:if="{{photoAlbum}}">
    </view>
    <view class="shadowMask-mask" id="3" bindtap="cancelMask" wx:if="{{photoAlbum}}"></view>
</view>

wxss文件

page {
    font-size:16px;
    font-family:-apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}
.followrecords-container{
    width: 100%;
    height: auto;
    flex-direction:column;
    display:flex;
    position: fixed;            /*就這特殊*/
    background-color:#ffffff;
}