数据过多 如何实现页面滚动

最新推荐文章于 2024-05-15 07:33:25 发布
最新推荐文章于 2024-05-15 07:33:25 发布
阅读量516 收藏
点赞数
分类专栏： Android 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mlown/article/details/114844619
版权

（1）如果是TextView直接使用即可,如果不是则使用方法2
在这里插入图片描述

（2）在大布局的下面嵌套一个ScrollView,并在ScrollView下嵌套一个LinearLayout包含所有布局
具体代码如下

重要的部分只有这个，代码部分是示例
在这里插入图片描述
示例部分

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#f5f2f2"
    tools:context="client.android.myapp.TypeView">
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="牲畜类"
        android:textSize="22dp"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:paddingLeft="5dp"

        />
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="105dp"
        android:orientation="vertical"
        >
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="50dp"
            >
            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:text="鸡"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
            />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:text="鸭"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:text="牛"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:text="马"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginTop="5dp"
            >
            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:text="猪"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:text="狗"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_weight="2"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#f5f2f2"
                />
        </TableRow>
    </TableLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="果蔬类"
        android:textSize="22dp"
        android:paddingTop="15dp"
        android:paddingBottom="10dp"
        android:paddingLeft="5dp"


        />
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="215dp"
        android:orientation="vertical"
        >
    <TableRow
        android:layout_width="match_parent"
        android:layout_height="50dp"
        >
        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:text="苹果"
            android:layout_weight="1"
            android:textSize="25dp"
            android:gravity="center"
            android:layout_marginLeft="4dp"
            android:background="#ffffff"
            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:text="香蕉"
            android:layout_weight="1"
            android:textSize="25dp"
            android:gravity="center"
            android:layout_marginLeft="4dp"
            android:background="#ffffff"
            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:text="葡萄"
            android:layout_weight="1"
            android:textSize="25dp"
            android:gravity="center"
            android:layout_marginLeft="4dp"
            android:background="#ffffff"
            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:text="桃"
            android:layout_weight="1"
            android:textSize="25dp"
            android:gravity="center"
            android:layout_marginLeft="4dp"
            android:background="#ffffff"
            />
    </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginTop="5dp"
            >
            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:text="梨"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:text="橘子"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:text="樱桃"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:text="橙子"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginTop="5dp"
            >
            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:text="白菜"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:text="菠菜"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:text="韭菜"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:text="花生"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginTop="5dp"
            >
            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:text="豆芽"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:text="香菜"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:text="土豆"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:text="萝卜"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
        </TableRow>
    </TableLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="水产品"
        android:textSize="22dp"
        android:paddingTop="15dp"
        android:paddingBottom="10dp"
        android:paddingLeft="5dp"

        />
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="105dp"
        android:orientation="vertical"
        >
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="50dp"
            >
            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:text="鱼"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:text="虾"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:text="蟹"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:text="贝类"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginTop="5dp"
            >
            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:text="植物类"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_weight="3"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#f5f2f2"
                />
        </TableRow>
    </TableLayout>
    </ScrollView>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="干果类"
        android:textSize="22dp"
        android:paddingTop="15dp"
        android:paddingBottom="10dp"
        android:paddingLeft="5dp"

        />
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="105dp"
        android:orientation="vertical"
        >
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="50dp"
            >
            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:text="枣"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:text="开心果"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:text="地瓜干"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:text="山楂干"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
        </TableRow>
        <TableRow
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginTop="5dp"
            >
            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:text="葡萄干"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:text="夏威夷果"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:text="巴旦木"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#ffffff"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_weight="1"
                android:textSize="25dp"
                android:gravity="center"
                android:layout_marginLeft="4dp"
                android:background="#f5f2f2"
                />
        </TableRow>
    </TableLayout>
    </LinearLayout>
   </ScrollView>
</LinearLayout>
mlown
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
大量数据html页面表格滚动显示
03-08
可从后台写循环获取上万数据，赋值到js全局变量，每次滚动显示所需分页数据，不会一次性显示大数据量导致页面滚动卡死，从ag-grid控件中获取想法，该文件可参考，ag-grid利用css3不兼容ie8，已换成别的想法支持
Vue下滚动到页面底部无限加载数据的示例代码
08-27
本文将介绍如何使用 Vue 实现滚动到页面底部无限加载数据的示例代码。该示例代码将涵盖 Vue 的生命周期、axios 的简单用法、moment.js 格式化日期、图片懒加载、结合原生 js 来写 scroll 事件等技术要点。 1. Vue ...
页面里的数据滚动显示
WisonKot
07-09 543
问题： 让一个页面里的数据滚动显示  比如页面刷新间隔是5秒 第一次刷新的时候显示头20条  第二次刷新的时候显示 后20条 以此类推   到最后一页 再显示第一页 ===================================== 方式： 在页面字段上新加一个更新时间  每次页面刷新的时候就把当前时间写进这个新加字段里  然后页面按这个更新时间排序   每次刷新的时候当前页面...
echarts图形数据过多自动滚动（赋代码）
weixin_44979432的博客
03-22 1998
因项目使用echarts数据过多自己滚动 效果如下： 代码如下： <template> <div id="echarts" style="width: 500px; height: 400px"></div> </template> <script> import echarts from "echarts"; export default { name: "", data() { return { }; },
ext布局问题之tab panel内的gridpanel内容数据变多，出现滚动条
weixin_30832351的博客
11-23 255
1）解决之道： 1.修改tabPanel var tabs= new Ext.TabPanel({ border: false, region:'center', id:'center', activeTab:0, items: [{ 2.将tabPanel的...
滚动加载数据
我的个人技术专栏
12-12 1717
/*首先在页面中引入jquery库*//*然后添加下面的js函数*/ var pageno = 2; $(function () { $(window).bind("scroll", function () { $('#ctl00_ContentPlaceHolder1_content').each(functi
实现数据自动滚动
weixin_48850727的博客
02-14 184
实现数据自动滚动
基于AngularJS实现页面滚动到底自动加载数据的功能
10-23
本文介绍如何使用AngularJS结合第三方控件ngInfiniteScroll来实现页面滚动到底部自动加载数据的功能。首先，需要下载ngInfiniteScroll组件，并在项目中引入必要的JavaScript库，包括jQuery、AngularJS以及...
vue elementUI table表格数据 滚动懒加载的实现方法
10-17
在处理大量数据展示时，为了避免一次性加载过多数据导致页面响应慢或用户体验不佳，我们可以采用滚动懒加载（Scroll Lazy Loading）的技术。在 Vue 和 ElementUI 中实现滚动懒加载主要涉及以下知识点： 1. **Vue ...
Vue实现渲染数据后控制滚动条位置(推荐)
10-15
在Vue.js应用中，有时我们需要在数据渲染完成后自动滚动到页面的特定位置，例如在一个聊天应用中，新发送的消息需要立即出现在可视区域内。这通常涉及到控制滚动条位置的技术。本文将详细讲解如何在Vue中实现在渲染...
数据实时显示与滚动
10-22
VB代码，能实时动态显示数据，在超出坐标时滚动显示
实现li列表无缝滚动的插件
Polaris_tl的博客
10-15 1403
封装函数实现li列表的无缝滚动，调用简单，理解容易；欢迎大家品尝！！！！
echart 使用滚动数据
走走停停
06-25 1109
数据滚动
如何将不同信息的数据对象合并显示到同一个页面上或者滚动窗口中
Dreamer的专栏
09-05 1318
最近在做项目的时候，有个需求是将新增的信息添加到之前信息展示的
h5数据滚动-上滚
henghahouhei的博客
06-24 489
h5数据滚动-上滚
全站最简单 “数据滚动可视化大屏” 【JS基础拿来即用】
weixin_52212950的博客
09-12 7959
本案例功能为数据自动滚动，可搭配后端进行数据实时的可视化添加，光标移动到屏幕处可以暂停滚动，移开继续滚动
一步一步写web之初识web（五-数据滚动实现）
week_ed的专栏
04-03 776
趁着空挡赶紧写！ 一、数据滚动 这节想做的效果是在一个框内数据可以循环的向上滚动，只能说功能仿照永夜君王贴吧的捧场动态，样式就不严格一样了。 首先要呈现一个边框出来 #rollText{ position: absolute; width: 400px; border: 1px solid #333333; margin-top: 300px; he
硕正控件动态选择编辑_来来来，一起学习Excel动态图表的制作
weixin_39762666的博客
11-30 236
一、应用效果效果演示二、实现原理通过公式和滚动条控件，控制图表数据的数据源，让数据动态变化。三、 数据准备数据源处理准备销售数据一份，设置一个辅助数据E1，用来表示要显示数据的最大月份，月份和金额的动态显示，需要掌握以下知识点：1. IF函数的应用。必须掌握的判断三剑客：IF AND OR函数详细教程2. ROW()函数的应用。3. 绝对引用的用法。相对引用、绝对引用和混合引用到底该怎么用？设置销...
全站最简单 “数据滚动可视化大屏” 【JS基础拿来即用】_数据滚动大屏源码
最新发布
2401_84181577的博客
05-15 583
另外，本数据可视化大屏页面可以搭配后端代码使用进行数据的实时添加可视化展示的作用，如果有需要可以将本案例中数据的表格的td数据信息换为用户个人信息的主页链接，这样光标移上暂停滚动后可以对用户主页信息进行查看，另外如果整个代码直接搬用复制到各位大佬的网站页面，可能会出现一些不可预估的错位，因为本案例是设置的居中屏幕的。
input展示数据过多如何实现数据懒加载
05-19
数据懒加载（Lazy Load）是指在页面滚动到可视范围内时，再去加载该区域的数据。这样可以优化页面加载速度和用户体验。 下面是一种实现数据懒加载的方式： 1. 给需要懒加载的 DOM 元素添加一个占位符，比如一个空白的 div，占据该元素的位置和尺寸。 2. 监听页面滚动事件，判断需要懒加载的元素是否进入可视范围内。 3. 如果元素进入可视范围内，则动态加载数据，并将数据渲染到占位符元素中。 4. 加载完成后，将占位符元素替换为真实的数据元素。 以下是示例代码： HTML 结构： ```html <div class="lazy-load"> <div class="placeholder"></div> </div> ``` JavaScript 代码： ```javascript // 获取需要懒加载的元素 const lazyLoadEl = document.querySelector('.lazy-load'); // 获取占位符元素和真实数据元素 const placeholderEl = lazyLoadEl.querySelector('.placeholder'); const realDataEl = document.createElement('div'); // 监听页面滚动事件 window.addEventListener('scroll', () => { // 获取元素的位置和尺寸信息 const lazyLoadRect = lazyLoadEl.getBoundingClientRect(); const viewportHeight = window.innerHeight; // 判断元素是否进入可视范围内 if (lazyLoadRect.top < viewportHeight) { // 动态加载数据 const data = loadLazyData(); // 渲染数据到占位符元素中 realDataEl.innerHTML = data; lazyLoadEl.replaceChild(realDataEl, placeholderEl); } }); function loadLazyData() { // 加载数据的逻辑 } ``` 需要注意的是，在实际开发中，还需要对滚动事件进行节流或防抖处理，以避免频繁触发滚动事件导致性能问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值