单击famo.us scrollview中的项目

时间:2014-06-27 11:30:38

标签: javascript coffeescript famo.us mouseup

我有一个包含许多图像的滚动视图。

事件正在发挥作用,可以拖动滚动视图。

我希望能够点击单个图像来获取详细视图,因此使用了:

surface.on 'click', => @parent.navTo('detail')

然而,这有效的是,如果我在滚动上面的事件时单击图像也会触发。

我想这就是移动浏览器有300毫秒延迟的全部原因 - 告诉您是否点击或拖动。 Famous还有其他活动可以听吗?

在输入/ FastClick.js中我只看到' touchstart' ' touchmove'和' touchend'

我们是否必须在我们自己的代码中跟踪拖动动作是否发生,或者着名的引擎是否有助于此?

FWIW我使用GenericSync来管道周围的事件,并使视图也可以在桌面上运行。

constructor: (@parentView, @data) ->
  SCROLLDIR = 1   # 0 horiz, 1 vertical
  super({
    direction: SCROLLDIR
    paginated: true
    pageStopSpeed: 5
  })

  @addContent()
  @mouseSync   = new famous.inputs.MouseSync({direction: SCROLLDIR})
  @mouseSync.pipe(this)

addContent: () ->

  comics = Comics.find()
  surfaces = []
  @sequenceFrom(surfaces)

  for item in comics.fetch()
    div = document.createElement('div')
    comp = UI.renderWithData(Template.comicCover, item)
    UI.insert(comp, div)

    surface = new famous.core.Surface({
      content: div
      size: [undefined, 400]
      properties:
        backgroundColor: "#eff"
    })
    surfaces.push(surface)
    surface.pipe(this)
    surface.on 'click', => @parentView.navTo('comicPages')

    # surface.pipe(@mouseSync)

  return @surface

1 个答案:

答案 0 :(得分:1)

我遇到过类似的问题。为了解决这个问题,我只是跟踪滚动视图滚动的时间,然后确保不滚动点击。

这是我要添加的代码..希望它有所帮助!

# In constructor

this.sync.on 'update',  () => @scrolling = true
this.sync.on 'end',     () => @scrolling = false

# In addContent

surface.on 'click', () =>
    if !@scrolling
        @parentView.navTo('comicPages')