上面webview 下边评论

2018-10-16 11:50:49

近日接到一个需求,需要在一个页面上方用webview显示网页的内容,下半部分用原生实现一个评论列表。

初步想法有两个:

1、Header模式:用RecyclerView显示原生的评论列表,把WebView作为RecyclerView的第0项。

ViewGroup.LayoutParams lp =newViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT);

WebView web =newWebView(parent.getContext());

web.setLayoutParams(lp);

需要把WebView撑开,保证WebView的内容完全展示。

2、ScrollView模式:最外层用NestedScrollView容器,内层放一个LinearLayout,从上到下依次是WebView和RecyclerView;

布局上没有什么大的问题,就是滚动会觉得有点卡,没有关系,设置一下就好了。

LinearLayoutManager layoutManager =newLinearLayoutManager(this);

layoutManager.setSmoothScrollbarEnabled(true);

layoutManager.setAutoMeasureEnabled(true);

recyclerView.setLayoutManager(layoutManager);

recyclerView.setHasFixedSize(true);

recyclerView.setNestedScrollingEnabled(false);

recyclerView.setLayoutManager(layoutManager);

Pros and Cons:

总的来说,优缺点非常明显,在评论列表条数特别多(实验时用了500条)的时候:

页面初始化结束时:Header模式申请的内存为25.77m;ScrollView模式申请的内存为37.87m

列表滚动到底时:Header模式申请的内存为28.09m; ScrollView模式申请的内存为40.63m

gc后:Header模式申请的内存为25.05m; ScrollView模式申请的内存为27.77m

Example: https://github.com/bobbySpace/WebviewAndList

  • 2020-02-22 17:35:14

    使用tweenjs写一个发牌的demo

    移动端h5的三大抽奖方式:转盘,老虎机,翻纸牌。 前两样demo比较多,用户也审美疲劳了。这次微信公众号要抽奖,于是调研了下翻纸牌。

  • 2020-02-22 17:45:43

    tweenjs简单快速学习

    tweenjs 是使用 JavaScript 中的一个简单的补间动画库,支持数字、对象的属性和 CSS 样式属性的赋值。 tweenjs 以平滑的方式修改元素的属性值,需要传递给 tween 要修改的值、动画结束时的最终值和动画花费时间(duration),之后 tween 引擎就可以计算从开始动画点到结束动画点之间值,从而产生平滑的动画效果。

  • 2020-02-22 17:47:12

    easeJs入门学习教程

    createjs中包含以下四个部分: EaselJS:用于 Sprites、动画、向量和位图的绘制,创建 HTML5 Canvas 上的交互体验(包含多点触控) TweenJS:用于做动画效果 SoundJS:音频播放引擎 PreloadJS:网站资源预加载

  • 2020-02-22 17:54:59

    最新FullCalendar中文文档

    Fullcalendar是一款用来管理日程安排、工作计划的日历工具,它功能非常强大而且非常实用。而目前网络上没有很好的中文文档,为了更好的和大家分享Fullcalendar的相关使用,即日起计划将Fullcalendar的英文文档翻译成中文版。

  • 2020-02-22 17:57:05

    nuxtjs支持api接口,serverMiddleware

    Who can’t relate to this: You’ve built a small portfolio page for someone, maybe a company, a friend or yourself. And the only API endpoint you’d need is one for a form. What now? Scaffolding a new service just for this one endpoint?

  • 2020-02-22 17:59:34

    FullCalendar插件的基本使用带详细配置翻译

    前段时间,一直在开发考勤系统,当时为满足设计的需求,选了好几个插件,最后决定采用Fullcanlendar的插件。感觉这个插件可以满足现阶段的功能开发需求

  • 2020-02-22 18:03:10

    Vue组件中使用Sass或者Less全局变量

    本文以Sass做案例,Less的参考,基本配置大同小异。 假如我们有一个Sass的全局变量common.scss文件,路径 ../style/common.scss 代码如下: