Overflow 超出滑动

使用说明

在大屏显示页面一般不存在横向滚动问题,但是用手机打开页面则存在内容过多导致横向滚动问题,本框架进行了优化,在手机端实现自动隐藏过多内容并可左右滑动。在需要移动端滚动的div外包两层,即ax-overflowax-inner,代码结构如下:

                                <div class="ax-overflow">
                                    <div class="ax-inner">
                                        <div>内容</div>
                                    </div>
                                </div>
                         
宽200px
宽600px
宽400px
                            <div class="ax-overflow">
                                <div class="ax-inner">
                                    <div style="width:200px;height:100px;line-height: 100px;text-align: center;background-color: #c4e6f5;">宽200px</div>
                                    <div style="width:600px;height:100px;line-height: 100px;text-align: center;background-color: #c1e2b3;">宽600px</div>
                                    <div style="width:400px;height:100px;line-height: 100px;text-align: center;background-color: #66afe9;">宽400px</div>
                                </div>
                            </div>
                         

表格滚动

表格在手机端的表现很差,所以最好使用本方法使之自适应滚动。具体用法是在ax-table上添加一个min-width样式。

等级 说明 举例
A、微小 为其他部门的工作提供服务。 会计、分析员、一线督导、一线经理、业务员
B、略有 对实现企业的发展战略提供支持性服务。 部门主管、执行经理
C、中等 对实现企业的发展战略起到重要作用。 助理副总、副总、事业部经理
D、巨大 制定企业的发展战略,位于企业的决策层。 中型组织CEO、大型组织的副总
                            <div class="ax-overflow">
                                <div class="ax-inner">
                                    <table class="ax-table" style="min-width: 800px;">
                                        <thead>
                                        <tr>
                                            <th>等级</th>
                                            <th>说明</th>
                                            <th>举例</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>A、微小</td>
                                            <td>为其他部门的工作提供服务。</td>
                                            <td>会计、分析员、一线督导、一线经理、业务员</td>
                                        </tr>
                                        <tr>
                                            <td>B、略有</td>
                                            <td>对实现企业的发展战略提供支持性服务。</td>
                                            <td>部门主管、执行经理</td>
                                        </tr>
                                        <tr>
                                            <td>C、中等</td>
                                            <td>对实现企业的发展战略起到重要作用。</td>
                                            <td>助理副总、副总、事业部经理</td>
                                        </tr>
                                        <tr>
                                            <td>D、巨大</td>
                                            <td>制定企业的发展战略,位于企业的决策层。</td>
                                            <td>中型组织CEO、大型组织的副总</td>

                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>