关于vue使用element-ui的select远程搜索,ios不能滑动搜索到的list这档事

关于vue使用element-ui的select远程搜索,ios不能滑动搜索到的list这档事,第1张

今天客户测试群里发bug,说ios系统的select下拉数据不能滑动

就我这小暴脾气,这不岂有此理么,解决它

因为我们的需求是需要搜索出数据然后下拉选的

 

 所以用的是el-select里的filterable属性用来请求后台搜索,但是bug这就出现了,客户说ios的不能滑动

我们都知道我们页面ios不能滑需要写

overflow: scroll;
-webkit-overflow-scrolling: touch;

但是组件是element一层层封装的,没办法,我们只要解析他的元素层是怎么嵌套标签的,这样我们可以在父节点加上touch

在控制台可以看到

 下拉列表是个ul和li标签,这就好办了。他是用li的数量撑出的滚动条,那我们在它父级上加样式

 随后我们找到了它的父级,他原本只有overflow和height属性,我们在它下面加上touch,就可以实现子元素在ios上滑动了。。

我们只需要在当前页面的css覆盖它原本封装的css

 代码

.el-scrollbar__wrap{
  overflow: scroll;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

这样覆盖了它的css之后,我们的select就可以在ios上很舒服的滑动了。

总结:

所有的ios不能滑动的问题都需要overflow: scroll;和 -webkit-overflow-scrolling: touch;控制,我们只需要在滑动的元素的父级加上即可,总体来说不太难,第三方组件也是把原生组件给一层层封装的,只要能自己解析他的元素和样式,就可以覆盖修改。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/994477.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存