企业微信中column-reverse数据过多不渲染bug

最新推荐文章于 2024-08-22 18:28:23 发布
最新推荐文章于 2024-08-22 18:28:23 发布
阅读量95 收藏
点赞数
文章标签： 企业微信 bug 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011561536/article/details/131944928
版权
在构建聊天UI时遇到一个问题，使用flex-direction:column-reverse时，企业微信PC版在数据过多时不渲染顶部UI。为了解决这个问题，采用了监听滑动事件的方法，每当滑动500px就刷新对话div的paddingtop，确保UI渲染。此解决方案消除了因滚动引起的偏移抖动，成功解决了渲染问题。
摘要由CSDN通过智能技术生成

bug：在做一个聊天UI时， 设置flex-direction: column-reverse，在企业微信pc版本中，当数据过多时，最上面的ui不会渲染，

解决方法：监听滑动事件，每滑动500px刷新对话div的paddingtop(页面布局会纵向偏移)，使得ui强制渲染，滑动时遮蔽了padding变化的偏移抖动问题，完美解决。

仙鹤小米粥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp(全端兼容) - 实现类似微信聊天、淘宝买卖双方交流的简易聊天功能示例（开箱即用，完整源码与注释）全端兼容 H5 App 小程序，稳定无 BUG！
高级前端工程师
03-01 1万+
uni-app开发聊天页面，想在uniapp做一个IM即时聊天，uniapp模仿微信实现聊天界面的示例代码，uniapp中使用Socket.IO/websocket实现即时通讯聊天，关于uniapp:uniapp实现IM即时通讯仿微信聊天功能，uniapp中使用websocket实现实时聊天功能，uniapp实现聊天功能，uniapp 聊天界面，uni-app+vue仿微信聊天APP界面，uniapp实现聊天|uniapp聊天源码，uniapp实现聊天室发送信息，前端uniapp+webSocket 聊天室
flex 容器属性详细介绍
前端开发工程师
09-03 1003
flex各属性详细介绍，各属性的作用和最终呈现出的效果
微信小程序 bug 集中营
源码分享的博客
10-18 1427
微信小程序 bug 集中营 create byjsliangon2018-9-17 17:58:56 Recently revised in2018-10-18 09:38:15  Hello 小伙伴们，如果觉得本文还不错，记得给个star， 你们的star是我学习的动力！GitHub 地址  GitHub 最新更新：2018-10-17 13:34:11。追求最新...
小程序学习（下篇）
qq_61529681的博客
08-18 1332
史上最全，结合第一篇开始学习，下程序基础版学习结束。
【小程序websocket前后端交互】uniapp写微信小程序聊天功能功能，websocket交互功能，心跳重连【详细注释，复制即用】
seeeeeeeeeee的博客
10-25 7794
这几天在做的一个需求，就是要写一个小程序端的页面，用于跟客服聊天。然后就用到了websocket技术，以前我做过网页版的，但是做小程序后发现网页版的逻辑放过来没问题，但是很多的方法和api是不生效的，所以又查文档专门看了一下对于的api，踩了一些坑后来记录一下，方便下次复制！1，页面信息展示，根据后台返回字段，分左边和右边展示2，输入后点击发送按钮，可以发送消息，通过websocket传给后台3，进入页面后链接websocket。
1-6章总结
2201_75556240的博客
04-24 1675
包括三个模块微信小程序是在微信平台上运行的一种小型应用程序。它们可以在不离开微信的情况下直接在微信内部打开和使用，而无需下载和安装到手机上。微信小程序提供了各种功能，包括社交、娱乐、购物、工具等等，用户可以通过微信搜索、扫描二维码或从朋友分享的链接中打开这些小程序。微信小程序相比于传统应用更加轻量级，因为它们不需要安装在手机上，节省了用户的存储空间。开发者可以随时更新小程序的内容和功能，用户无需手动更新，始终可以使用到最新版本。用户可以通过微信快速打开小程序，不需要额外的操作，使用起来非常方便。
asp子窗口读取父窗口数据_微信小程序MINA框架（数据绑定，事件操作，内部页面跳转，消息提示框，模态对话框 ...... ）
weixin_39918145的博客
11-21 129
数据绑定事件操作事件绑定冒泡事件非冒泡事件互斥事件事件对象内部页面跳转消息提示框模态对话框loading提示框操作菜单基本api接口获取用户信息获取用户位置信息（用户点选地图）获取图片Flex布局基本概念容器的属性项目的属性数据绑定在小程序中支持简易的数据绑定操作，数据绑定分两种：单向数据绑定和双向数据绑定。在输入框中如果通过value来操作数据，则视为单向数据绑定。如果通过model:value...
微信小程序开发指南介绍
weixin_34291004的博客
09-06 687
一、小程序介绍与开发环境： 1、helloworld代码 【1】请前往https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html微信开发者工具下载页面根据自己的操作系统下载对应的安装包进行安装。 【2】打开微信开发者工具，选择新建小程序项目，我们先不需理解AppID的概念，新建项目时选择无AppID，并取消勾选“建立普通快速启...
一个有意思的方案：不借助后台和 JS ，只用 CSS 让一个列表编号倒序，你会怎么做？
粉丝们务必加入微信粉丝群
08-04 426
作者：Manuel Matuzovic 译者：前端小智 来源：matuzo 点赞再看，微信搜索 【大迁世界】 关注这个没有大厂背景，但有着一股向上积极心态人。本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。 我正在做一个项目，其中有一个倒序的列表。列表创建时间降序排序的，这里我想在语义和视觉上都能体现出来(让列表显示对应的编号，编号越大表示是最新的)。网上做了一些研究，找到了一些有趣的解决办.
微信小程序-FlexLayout布局源码示例
05-07
在微信小程序开发中，FlexLayout布局是一种非常重要的布局方式，它允许开发者在有限的空间内灵活地安排组件的位置，实现各种复杂的界面设计。本示例主要探讨了如何在微信小程序中运用FlexLayout，以及其源码背后的...
微信小程序-FlexLayout布局.zip
04-13
综上所述，微信小程序中的FlexLayout布局和TCP/IP长连接是移动应用开发中不可或缺的技术点。通过熟练掌握Flex布局，我们可以构建出适应各种屏幕的美观界面；而利用TCP/IP长连接和WebSocket，我们则能实现高效、实时...
HTTP-Reverse-Shell:Python中的HTTP反向Shell
05-22
这是用Python编程的HTTP Reverse Shell。 它用于建立从客户端到服务器端的反向HTTP连接。 先决条件 Python 用法 在客户端上传输客户端程序 在服务器端传输服务器程序 运行服务器端程序以开始侦听 运行客户端程序 ...
基于GO的微信支付SDK - 商户支付-商户分账-服务商支付-服务商支付.zip
02-27
基于GO的微信支付SDK - 商户支付-商户分账-服务商支付-服务商支付.zip 安装包 go get -u / 查看文档 // 执行命令 godoc -http=:8888 -play // 浏览器打开文档 http://127.0.0.1:8888/pkg/// 破坏性更新 1.3.0版本将...
fasthttp-reverse-proxy:基于fasthttp的反向http websocket代理
05-10
特征 代理客户端支持的pool 。... proxy "github.com/yeqown/fasthttp-reverse-proxy/v2" ) var ( proxyServer = proxy . NewReverseProxy ( "localhost:8080" ) // use with balancer // weights = map[string]p
ShareSDK 企业微信
apkkkk的博客
08-16 936
本篇文档主要讲解如何使用企业微信并进行分享和授权。
8.19 day pre-bug
qq_30898861的博客
08-20 426
实在没bug了，只能改成prevent-bug，预防bug今天复习了很多sql的部分，还有很多没POST上来，果真是。
咸鱼之王手游内购修复无bug运营版联网架设+后台
2301_81926447的博客
08-21 1063
今天给大家带来一款单机游戏的架设：咸鱼之王手游。另外：本人承接各种游戏架设（单机+联网）本人为了学习和研究软件内含的设计思想和原理，带了架设教程仅供娱乐。教程是本人亲自搭建成功的，绝对是完整可运行的，踩过的坑都给你们填上了。如果你是小白也没问题，跟着教程走也是可以搭建成功的，但是一定要有耐心。。。
克服编程挫折：从Bug的迷宫中寻找出口与面对算法保持冷静的策略
最新发布
qq_30193097的博客
08-22 468
在编程学习的道路上，挫折感无疑是每个学习者都必须面对的挑战之一。它们仿佛是一座座高墙，阻挡我们前进的步伐。然而，正如许多有经验的编程高手所证明的那样，挫折并不是终点，而是成长和进步的催化剂。本文将分享一些有效的策略，帮助大家在遇到Bug和复杂算法时找到解决问题的方法，并保持心态的平和，最终在编程的路上取得突破。
flex-row-reverse
01-05
flex-row-reverse是CSS中的一个属性，用于指定flex容器中子元素的排列方向为从右到左。具体示例如下： ```html <style> .flex-container { display: flex; flex-direction: row-reverse; } .flex-item { width: 100px; height: 100px; background-color: red; margin: 10px; } </style> <div class="flex-container"> <div class="flex-item"></div> <div class="flex-item"></div> <div class="flex-item"></div> </div> ``` 上述代码中，我们创建了一个flex容器，并将其flex-direction属性设置为row-reverse，这样子元素会从右到左排列。每个子元素都具有相同的宽度和高度，并且它们之间有一定的间距。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值