我们使用的taro开发企业微信h5,taro中的组件使用的是weui组件,该组件在手机端工作,在桌面浏览器如:webkit中点击无效.改组件地址:https://weui.io/work/#picker,已查明原因:{pickerItem} touch相关的事件部分浏览器不支持,但是现在企业微信开发的h5,用户群不止手机,也包括PC上使用,我添加了phantom-limb库零时解决了,期望weui的picker能支持桌面了浏览器
{pickerItem}
ntjbwcob1#
<div className='weui-picker__group' onTouchStart={onTouchStart} onTouchMove={onTouchMove} onTouchEnd={onTouchEnd} > <div className='weui-picker__mask' /> <div className='weui-picker__indicator' /> <div className='weui-picker__content' style={this.getPosition()}> {pickerItem} </div> </div>
eivnm1vs2#
我最后的解决方法是:复制改组件,名字改为PickerEx, 修改pick-group/index.jsisTouchDevice() ? <div className='weui-picker__group' onTouchStart={onTouchStart} onTouchMove={onTouchMove} onTouchEnd={onTouchEnd} > <div className='weui-picker__mask'/> <div className='weui-picker__indicator'/> <div className='weui-picker__content' style={this.getPosition()}> {pickerItem} </div> </div> : <div className='weui-picker__group' onMouseDown={(e)=>{ onTouchEnd({ ...e, changedTouches: [{ clientY: e.clientY }] }) }} onMouseUp={(e)=>{ onTouchStart({ ...e, changedTouches: [{ clientY: e.clientY }] }) }} > <div className='weui-picker__mask'/> <div className='weui-picker__indicator'/> <div className='weui-picker__content' style={this.getPosition()}> {pickerItem} </div> </div>
isTouchDevice() ? <div className='weui-picker__group' onTouchStart={onTouchStart} onTouchMove={onTouchMove} onTouchEnd={onTouchEnd} > <div className='weui-picker__mask'/> <div className='weui-picker__indicator'/> <div className='weui-picker__content' style={this.getPosition()}> {pickerItem} </div> </div> : <div className='weui-picker__group' onMouseDown={(e)=>{ onTouchEnd({ ...e, changedTouches: [{ clientY: e.clientY }] }) }} onMouseUp={(e)=>{ onTouchStart({ ...e, changedTouches: [{ clientY: e.clientY }] }) }} > <div className='weui-picker__mask'/> <div className='weui-picker__indicator'/> <div className='weui-picker__content' style={this.getPosition()}> {pickerItem} </div> </div>
niknxzdl3#
这库还有人维护吗
5lhxktic4#
@milkyu 不知道 我加了 交流群 但还没审核 希望有人维护
56lgkhnf5#
自己看源码 搞搞吧。。
5条答案
按热度按时间ntjbwcob1#
<div className='weui-picker__group' onTouchStart={onTouchStart} onTouchMove={onTouchMove} onTouchEnd={onTouchEnd} > <div className='weui-picker__mask' /> <div className='weui-picker__indicator' /> <div className='weui-picker__content' style={this.getPosition()}> {pickerItem} </div> </div>eivnm1vs2#
我最后的解决方法是:复制改组件,名字改为PickerEx, 修改pick-group/index.js
isTouchDevice() ? <div className='weui-picker__group' onTouchStart={onTouchStart} onTouchMove={onTouchMove} onTouchEnd={onTouchEnd} > <div className='weui-picker__mask'/> <div className='weui-picker__indicator'/> <div className='weui-picker__content' style={this.getPosition()}> {pickerItem} </div> </div> : <div className='weui-picker__group' onMouseDown={(e)=>{ onTouchEnd({ ...e, changedTouches: [{ clientY: e.clientY }] }) }} onMouseUp={(e)=>{ onTouchStart({ ...e, changedTouches: [{ clientY: e.clientY }] }) }} > <div className='weui-picker__mask'/> <div className='weui-picker__indicator'/> <div className='weui-picker__content' style={this.getPosition()}> {pickerItem} </div> </div>niknxzdl3#
这库还有人维护吗
5lhxktic4#
@milkyu 不知道 我加了 交流群 但还没审核 希望有人维护
56lgkhnf5#
自己看源码 搞搞吧。。