blocks|key|2523239|text|我开始思考我自己项目的长期计划，一段时间前，我终于让自己通过github(链接github问题页面)联系到了插件的开发者。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2523240|他更新了插件，以便您现在可以动态更改所有插件选项。这也使得我所寻找的行为成为可能。有关这方面的文档可以在here+(该方法名为：option+)中找到。|style|CODE|2523241|http://jsfiddle.net/lollero/yATmM/|2523242|http://jsfiddle.net/lollero/yATmM/show|2523243|我的代码：|2523244|$(function()+{++++++

++++$(".parent").each(function()+{

++++++++var+obj+=+$(this),
++++++++++++objD+=+obj.data(),
++++++++++++objChild+=+obj.find('.child'),
++++++++++++scrollbars+=+obj.height()+<+objChild.height();

++++++++obj
++++++++.data({+"swipe":+"in"+})
++++++++.swipe({

++++++++++++fallbackToMouseEvents:+true,
++++++++++++swipe:function(+event,+direction+)+{

++++++++++++++++//+swipeIN+=+swipe+that+shows+#child+
++++++++++++++++//+(+Swiping+is+allowed+for+all+directions+).
++++++++++++++++if+(+objD.swipe+===+'in'+)+{

++++++++++++++++++++obj.data({+"swipe":+"out"+});
++++++++++++++++++++objChild.show();

++++++++++++++++++++//+If+scrollbar+exists,+set+allowPageScroll+data+
++++++++++++++++++++//+to+'vertical',+so+that+next+time+when+you+swipe+
++++++++++++++++++++//+up+or+down,+you+can+scroll+vertically.
++++++++++++++++++++scrollbars+&&+obj.swipe('option',+'allowPageScroll',+'vertical');

++++++++++++++++}
++++++++++++++++//+swipeOUT+=+swipe+that+hides#child+
++++++++++++++++//+If+scrollbars+don't+exist,+swipe+at+any+direction+to+hide.
++++++++++++++++//+If+scrollbars+exits,+swipe+left+or+right+to+hide+(+Up+and+Down+is+reserved+for+scrolling+).
++++++++++++++++else+if+(+
++++++++++++++++++++objD.swipe+===+'out'+&&+scrollbars+&&+(+direction+===+'left'+%7C%7C+direction+===+'right'+)++%7C%7C+
++++++++++++++++++++objD.swipe+===+'out'+&&+!scrollbars
++++++++++++++++)+{

++++++++++++++++++++obj.data({+"swipe":+"in"+});
++++++++++++++++++++objChild.hide();

++++++++++++++++++++//+If+scrollbar+exists,+set+allowPageScroll+data+to
++++++++++++++++++++//+false,+so+that+next+time+when+you+swipe+up+or+down,
++++++++++++++++++++//+you+actually+trigger+a+swipe.
++++++++++++++++++++scrollbars+&&+obj.swipe('option',+'allowPageScroll',+false+);

++++++++++++++++}

++++++++++++}

++++++++});

++++});

});|code-block|syntax|javascript|2523245|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/issues/77|1|http://labs.rampinteractive.co.uk/touchSwipe/demos/Options.html|2|3^0|U|6|0|0|1S|6|1G|4|1|0|0|Y|2|0|0|12|3|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|D|3|E|5|6|7|18|8|@$A|19|B|1A|F|G]]|9|@$A|1B|B|1C|1|1D]]|C|$]]|$1|H|3|I|5|6|7|1E|8|@]|9|@$A|1F|B|1G|1|1H]]|C|$]]|$1|J|3|K|5|6|7|1I|8|@]|9|@$A|1J|B|1K|1|1L]]|C|$]]|$1|L|3|M|5|6|7|1M|8|@]|9|@]|C|$]]|$1|N|3|O|5|P|7|1N|8|@]|9|@]|C|$Q|R]]|$1|S|3|-4|5|6|7|1O|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]|12|$5|V|W|X|C|$Y|I]]|13|$5|V|W|X|C|$Y|K]]]]

I started thinking about the long term plan of my own project and some time ago finally got myself to contact the developer of the plugin via <a href="https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/issues/77" rel="nofollow">github</a>( Link the github issue page ).

He updated the plugin so that you can now change all plugin options on the fly. That also enables the behavior I was looking for. The documentation for this can be found <a href="http://labs.rampinteractive.co.uk/touchSwipe/demos/Options.html" rel="nofollow">here</a> ( The method is called: <code>option</code> ).

<a href="http://jsfiddle.net/lollero/yATmM/" rel="nofollow">http://jsfiddle.net/lollero/yATmM/</a>

<a href="http://jsfiddle.net/lollero/yATmM/show" rel="nofollow">http://jsfiddle.net/lollero/yATmM/show</a>

My Code:

<pre><code>$(function() { 

 $(".parent").each(function() {

 var obj = $(this),
 objD = obj.data(),
 objChild = obj.find('.child'),
 scrollbars = obj.height() &lt; objChild.height();

 obj
 .data({ "swipe": "in" })
 .swipe({

 fallbackToMouseEvents: true,
 swipe:function( event, direction ) {

 // swipeIN = swipe that shows #child 
 // ( Swiping is allowed for all directions ).
 if ( objD.swipe === 'in' ) {

 obj.data({ "swipe": "out" });
 objChild.show();

 // If scrollbar exists, set allowPageScroll data 
 // to 'vertical', so that next time when you swipe 
 // up or down, you can scroll vertically.
 scrollbars &amp;&amp; obj.swipe('option', 'allowPageScroll', 'vertical');

 }
 // swipeOUT = swipe that hides#child 
 // If scrollbars don't exist, swipe at any direction to hide.
 // If scrollbars exits, swipe left or right to hide ( Up and Down is reserved for scrolling ).
 else if ( 
 objD.swipe === 'out' &amp;&amp; scrollbars &amp;&amp; ( direction === 'left' || direction === 'right' ) || 
 objD.swipe === 'out' &amp;&amp; !scrollbars
 ) {

 obj.data({ "swipe": "in" });
 objChild.hide();

 // If scrollbar exists, set allowPageScroll data to
 // false, so that next time when you swipe up or down,
 // you actually trigger a swipe.
 scrollbars &amp;&amp; obj.swipe('option', 'allowPageScroll', false );

 }

 }

 });

 });

});
</code></pre>

blocks|key|46703|text|将选项'allowPageScroll‘从'auto’(默认值)设置为'vertical‘(在某些情况下，如果你愿意的话)应该可以解决这个问题|type|unstyled|depth|inlineStyleRanges|entityRanges|data|46704|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Setting the option 'allowPageScroll' from 'auto' (default) to 'vertical' (in some cases if you want) should do the trick

I'm using <a href="https://github.com/mattbryson/TouchSwipe-Jquery-Plugin" rel="nofollow noreferrer">SwipeTouch plugin</a> to hide and show <code>#child</code> element by swiping. 

I have <code>#parent</code> element that holds the <code>#child</code> element.

This <code>#child</code> will not always have enough content to create scrollbar, but the problem will arise when there is.The <code>#parent</code> constrains <code>#child</code> element, forcing a scrollbar if <code>#child</code> element is taller than the <code>#parent</code>

<pre><code>&lt;div id="parent"&gt;
 &lt;div id="child"&gt;
 &lt;!-- Lots of content --&gt;
 &lt;/div&gt;
&lt;/div&gt;​
</code></pre>

<hr>

I'd like to allow swiping at any direction to show and hide the <code>#child</code>...

<ul>
<li>Swiping to show <code>#child</code> element will be referred to as <code>swipeIN</code>.</li>
<li>Swiping to hide <code>#child</code> element will be referred to as <code>swipeOUT</code>.</li>
</ul>

...problem with that is, if and when the scrollbars exist and the <code>#child</code> is visible, I can't scroll vertically because that would register as swiping attempt and trigger <code>swipeOUT</code>.

So, I had a plan: 

<ul>
<li>No scrollbar: swipe at all directions to trigger <code>swipeIN</code> and <code>swipeOUT</code>.</li>
<li>Scrollbars: Swipe all directions to trigger <code>swipeIN</code>. 'Swipe' up or down to scroll, swipe left or right to trigger <code>swipeOUT</code>.</li>
</ul>

<img src="https://i.stack.imgur.com/0XWeG.png" alt="enter image description here">

This was a good plan, except that it doesn't work. I guess if I was able to disable swipe top and swipe down temporarily, it would work...

<a href="http://jsfiddle.net/lollero/VvNhb/2/" rel="nofollow noreferrer">Link to my attempt</a> ( the problem is only apparent on a touch device ).

<a href="http://jsfiddle.net/lollero/VvNhb/2/show/" rel="nofollow noreferrer">Link that is better for testing in a touch device</a>

Any ideas on how I could get this to work?

Temporarily allow scrolling vertically with TouchSwipe plugin

我使用通过滑动来隐藏和显示#child元素。我有一个包含#child元素的#parent元素。此#child并不总是有足够的内容来创建滚动条，但是当存在is.The #parent约束#child元素时就会出现问题，如果#child元素比#parent高，则强制使用滚动条<div id="parent"> <di...

问暂时允许使用TouchSwipe插件进行垂直滚动
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问暂时允许使用TouchSwipe插件进行垂直滚动EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问暂时允许使用TouchSwipe插件进行垂直滚动
EN