- 自动检测微信浏览器
我们使用 isWechatBrowser() 函数来检测当前环境是否为微信浏览器：
import { isWechatBrowser } from './wechatBrowserUtils'
const isWechat = isWechatBrowser()2. 强制显示滚动条
在微信浏览器中，我们通过以下方式强制显示滚动条：
CSS 样式强制
/* 微信浏览器滚动条强制显示 */
body.wechat-browser .table-scroll-container {
overflow: scroll !important;
-webkit-overflow-scrolling: touch !important;
}
body.wechat-browser .table-scroll-container::-webkit-scrollbar {
display: block !important;
width: 12px !important;
height: 16px !important;
visibility: visible !important;
opacity: 1 !important;
}JavaScript 动态处理
// 添加滚动事件监听，确保滚动条始终可见
tableContainer.addEventListener('scroll', function (this: HTMLElement) {
// 强制重绘滚动条
this.style.overflow = 'hidden'
setTimeout(() => {
this.style.overflow = 'scroll'
}, 10)
})3. 自定义滚动条优化
对于自定义滚动条，我们也提供了微信浏览器的特殊处理：
/* 微信浏览器自定义滚动条样式 */
body.wechat-browser .custom-scrollbar-container {
height: v-bind('(props.customScrollbarHeight + 2) + "px"');
}
body.wechat-browser .custom-scrollbar-thumb {
top: 1px;
height: calc(100% - 2px);
}
1 个回复
DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题，如果艾特我没看到，请主动私信
先保证普通 index.html 能始终展示滚动条，排除宿主环境的特定规则