weui-picker有bug，部分浏览器不能滚动选择

[woodstream]

打开官网，选择picker的示例，大部分浏览器无法滚动选项，就算能滚动，效果都不流畅

[cipchk]

能否提供更多的细节呢？比如机型，浏览器版本号之类的。

另 weui-picker 本身并无对样式做任何修改，所有的一切样式效果都取决于 weui 自身；是否同样的环境里 https://weui.io/ 也存在同样的问题呢？

[woodstream]

weui.io怎样都没问题，这里的mac中chrome和Safari都有问题，手机上，基于服务没问题，基于组件的会被遮挡 发自网易邮箱大师 在2017年07月14日 18:07，卡色 写道： 能否提供更多的细节呢？比如机型，浏览器版本号之类的。 另 weui-picker 本身并无对样式做任何修改，所有的一切样式效果都取决于 weui 自身；是否同样的环境里 https://weui.io/ 也存在同样的问题呢？ — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[cipchk]

实在不好意思，我无法重现，能否提供一些能让我重现的具体的细节呢？

[ghost]

demo确实没有滚动效果，不过按照API应用到开发中是有效果的。

[cipchk]

难受！我无法重现，压根就没法解决这个问题。我手上有三个手机（iphone5\7\小米） 全正常。

[btpka3]

重现：

• 示例 Url ：citypicker
• 操作系统: MacOS High Sierra
• 浏览器（桌面版） :
  • Firefox 57.0.1 (64 位)
  • Google Chrome 62.0.3202.94 (Official Build) (64-bit)
  • Safari 11.0.1 (13604.3.5)
• 现象（比如：省市区选择）:

  • 均不支持 鼠标下拉拖拽/鼠标滚轮滚动 切换选择内容

  • 在弹出底部选择面板时，在 Chrome 中，通过鼠标拖拽修改中间列和右侧列的宽度比例时，会闪屏，底部选择面板甚至会。
    

  • Firefox 和 Chrome 中，底部弹出的省地区选择面板均占据 demo布局3列中的 2列——中间的演示区域和右侧的 Overview/API/Sample Code区域, 但 safari 中只显示在 中间的演示区，造成显示不全。
    

注意：

• 该问题均是Mac上电脑版浏览器出现的问题，手机版暂未发现问题。
• 鼠标不能拖拽下拉选择为疑似bug。
• 后面两个显示问题可能仅仅是 demo的问题，而非ngx-weui的bug。

[cipchk]

API 站点所展示的只是为了增强API展示效果。实际应该是应该是在手机上预览 https://cipchk.github.io/ngx-weui/#/example 所呈现的结果有异常才算真有异常。

[btpka3]

https://cipchk.github.io/ngx-weui/#/example/picker
"鼠标不能拖拽下拉更换选择项“ 在 MacOS 的浏览器上也存在，估计可能与 touch event 相关吧。

[cipchk]

手机上不存在鼠标这一说。

[etbuilder]

Does it work on PC browser? not Just mobile

[cipchk]

Just mobile

[cxy930123]

这个实现用的是触摸事件，只在mobile上有效，基本上所有weui的库都是这样的

[woodstream]

@cxy930123 是手机上也有问题才反馈

[tomnattle]

{pickerItem}

源码是这样的,[onTouchStart,onTouchMove,onTouchEnd]这几个事件的支持程度如下,好多浏览器不支持 哇哇哇

https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/ontouchstart

[tomnattle]

源码是这样的
<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>

[onTouchStart,onTouchMove,onTouchEnd]这几个事件的支持程度如下,好多浏览器不支持 哇哇哇
https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/ontouchstart

[tomnattle]

onTouchStart onTouchMove onTouchEnd不生效
onTouchStart onTouchMove onTouchEnd

Touch event does not work in Safari (WebKit) desktop

原因是:Safari的桌面版本不支持touch事件

解决方法:
yarn add phantom-limb;
require("phantom-limb");

`
import { Provider } from "@tarojs/redux";
import Taro, { Component, Config } from "@tarojs/taro";
import "./app.scss";
import Index from "./pages/index";
import configStore from "./store";
import errorHandler from "./utils/errorHandler";
import { getStorageSync } from "./utils";
import { AUTH_INFO } from "./constants";
import clientDetect from "./utils/clientDetect";
import { reportError } from "./apis/report";
import { initGa } from "./utils/ga";
import { getCurUserName } from "./services/user";
require("phantom-limb");

`