今天客户测试群里发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;控制,我们只需要在滑动的元素的父级加上即可,总体来说不太难,第三方组件也是把原生组件给一层层封装的,只要能自己解析他的元素和样式,就可以覆盖修改。