上面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-03-16 16:03:20

    css的var()函数

    　随着sass，less预编译的流行，css也随即推出了变量定义var函数。var()函数，就如同sass和less等预编译软件一样，可以定义变量并且进行对应的使用。

  • 2020-03-16 16:52:05

    对icomoon的误解，以及最快速的使用

    此时需要注意顶部第一个选项，Quick Usage，一定要打开，Enable Quick Usage，谁让咱英语不好呢，这个时候会出现一个css连接，直接引用就好了，就可以随意使用图标了，引入这一个css就能实现我们的功能，省区引入太多文件的烦恼，你可以在浏览器打开这个css，可以看到里面把我们所用的文件整成base64了。所以挺好用的。

  • 2020-03-17 09:47:05

    video标签视频不自动播放的问题

    添加 muted 属性，就可以通过地址栏进入网页的时候自动播放了，手机端还是有的有限制的，比如iphone浏览器，就不行，苹果手机为了保护用户的流量和用户的意愿，是禁止自动播放的，必须有手动触发。

  • 2020-03-17 14:21:31

    nuxt+pm2 自动化部署及打包后文件自动上传阿里云 oss（精华）

    部署nuxtjs，这一篇文章就够了，pm2 代码自动发布依赖于 git 工具，先将 ssh 密钥配置再你的代码仓库（github 或者 gitLab），具体操作自行 google 或者点击github 配置 ssh。 使用 ssh 密钥链接服务器 s $ ssh-copy-id root@1.2.3.4 # 把本机的 SSH 秘钥添加至服务器，配置成功后，以后就不需要再执行这条 SSH 命令了

  • 2020-03-18 21:15:34

    使用canvas画布解决百度地图自定义图层全球连续显示问题

        基于百度地图的Web API进行自定义图层叠加时，默认的图层只能叠加到全球范围以内，即经度范围为[-180, 180]，而无法将图层叠加到默认的全球范围以外，即经度范围超出了[-180, 180]之后，经纬度坐标会自动回归到(0, 0)，而导致在地图拖拽时全球以外无法连续显示想要的图层，此时可以基于百度地图的自定义图层将经纬度坐标转为像素点使用画布canvas来解决该问题。解决后效果如下图所示： ———————————————— 版权声明：本文为CSDN博主「宏伟杰作」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/u011284073/article/details/80549950

  • 2020-03-18 21:18:01

    node-canvas实现百度地图个性化底图绘制

    随着nodejs的推出，node的并发和异步的强大能力，越来越多的得到应用，而且取得了非常不错的效果。 作为一个前端工程师对node.js自然有着一份更深的感情，跃跃欲试的心情，总希望能将它应用到产品中来。

  • 2020-03-18 21:19:28

    高德地图和canvas画图结合应用的一些感想(一)

    入了团队才发现，该项目前后端分离，后端工程师已就位主要实现接口，IOS端工程师也已就位，还差一个web前端工程师。背脊一凉，我之前虽然写过一些js和css，虽有点功底但是离前端工程师还是有距离的啊。在和朋友说明情况后，朋友也是胆大，让我试试，主要他实在找不到人了（也有可能目前前端工程师报价都太贵了，创业嘛，能节约就节约，能理解。。。），没办法，走一步算一步吧。