• 微信小程序开发--宽为百分百,页面仍可左右滑动


      这段时间小程序开发时,很多时候,希望内容充满整个屏幕(高度、宽度100%),如下图

      

      但是在设置 .followrecords-container{100%;} 后发现 手机在横向上虽然页面完全展示了,但是部分手机的页面却可以左右滑动(好像是溢出了一样,页面的右边总有一块白色区域),这肯定不是我们需要的。你上下滑动是正常功能,如果是左右页面切换,能滑动也是正常的,但是你这不是页面切换,纯粹就是右边溢出了一部分,多出一条莫名的白色区域,导致的滑动,肯定是不允许的。

    解决办法就是在样式  .followrecords-container{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;
    }
  • 相关阅读:
    iOS 调试心得
    一步一步带你安装史上最难安装的 vim 插件
    20 行代码极速为 App 加上聊天功能
    在通知栏上玩游戏,Steve iOS 游戏实现思路
    ThinkPHP 3.2.x 集成极光推送指北
    MkDocs 文档生成逻辑浅析
    极光推送的角标问题
    聊天界面-自适应文字
    Python3.7源码包编译安装
    Navicat远程连接MySQL数据库
  • 原文地址:https://www.cnblogs.com/donghuang/p/9670422.html
Copyright © 2020-2023  润新知