上面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-01-16 08:52:22

    Vue函数式调用组件创建公共组件

    所有组件都需要这么去调用,就会有些许麻烦而且不太美观。像Loading、Toast等这些组件,一页面可以经常用到而且每次显示的内容都可能不一样,这样的话用js的方式【this.$xxx.show(option)】去调用就方便很多,而且代码也更整洁。

  • 2020-01-17 08:37:26

    css transition分别指定多个属性

    transition有四个属性,很多人都会遗忘,分别是transition-property,transition-duration,transition-timing-function,transition-delay,尤其是transition-delay,这个可以实现延迟动画

  • 2020-01-17 08:44:57

    vue keepalive 前进刷新后退不刷新终极解决方案

    另外,我们做路由的时候要有意的根据页面等级做出路由的长度 比如 /a是一级的页面/a/b是二级的页面,下面的文章大家也可以通过判断path的长度来计算rank值,不用有意自定了 这样做的好处有两点,一个就是前进刷新,后退不刷新,还有就是,如果我们做页面进出效果的时候也能排上用场。

  • 2020-01-17 15:28:24

    深入理解vue中的slot与slot-scope

    vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率、使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经可以写基础组件了”,于是就关闭了vue说明文档。