scrollSpy点击好滚动问题

bitlsy

scrollSpy在点击之前，滚动内容会与bar上的同步，但是如果在上面的bar上点击一下，即选择一个，定位到内容上相应的条上以后，再滚动内容，就无法滚动了，如何调试呢？

liangyongfei

http://docs.wex5.com/wex5-ui-question-list-2008/
是按这个实现的吗？？
请问你的代码怎么写的？？有没有使用ｓｃｒｏｌｌＶｉｅｗ组件？

bitlsy

是这个组件：$UI/system/components/bootstrap/scrollSpy/scrollSpy

根据wex5提供的scrollSpy的演示案例做的。

scrollView无法实现这种滚动互动功能，如下图所示。

liangyongfei

bitlsy 发表于 2016-12-19 17:21
是这个组件：$UI/system/components/bootstrap/scrollSpy/scrollSpy

根据wex5提供的scrollSpy的演示案例做 ...

你看下里面的源码。就是通过 a 标签 设置href 指定 id属性进行滚动的！说白了还是矛跳转 的方式！
和我连接提供的第一种方式一样的！

bitlsy

是的，但是这个组件实现的左边和右边是联动的。滚动左边，会同时定位到右边的bar上对应的A、B、C、D……等，比如左边滚动到鄂州市，右边bar就会自动定位到“E”上；同时，点击右边bar上的“F”，就会自动定位到左边的F行上。

scrollSpy组件做得非常好，只是唯一不足的，就是点击右边的bar上的字母后，就无法再滚动左边的内容实现联动了，只能点击右边的bar上字母进行定位左边的内容行了。
哈哈，由于本人研究源码的能力有限，应该是点击事件做的一些额外的功能，导致后续无法再滚动了。

bitlsy

是的，但是这个组件实现的左边和右边是联动的。滚动左边，会同时定位到右边的bar上对应的A、B、C、D……等，比如左边滚动到鄂州市，右边bar就会自动定位到“E”上；同时，点击右边bar上的“F”，就会自动定位到左边的F行上。

scrollSpy组件做得非常好，只是唯一不足的，就是点击右边的bar上的字母后，就无法再滚动左边的内容实现联动了，只能点击右边的bar上字母进行定位左边的内容行了。
哈哈，由于本人研究源码的能力有限，应该是点击事件做的一些额外的功能，导致后续无法再滚动了。

liangyongfei

bitlsy 发表于 2016-12-19 17:49
是的，但是这个组件实现的左边和右边是联动的。滚动左边，会同时定位到右边的bar上对应的A、B、C、D……等 ...

为什么不能滚动呢？我试了案例是可以的！
要不这样，把你的页面资源发来！本地测试看看！回事啥问题？

bitlsy

只是偶尔可以，大部分时间是不行的，尤其是条目多增加一些，问题就突出了。我基本上是按照那个案例修改的，这是把案例中的<h>和<p>标签换成了<li>了，我在之前也反复测试过。就是在案例上测试也是一样的，需要多增加一些条目（一楼的问题，就是在案例的基础上，增加了几个条目测试的）。

<?xml version="1.0" encoding="utf-8"?>
<div xmlns="http://www.w3.org/1999/xhtml" component="$UI/system/components/justep/window/window" design="device:m;" xid="window" class="window">  
  <div component="$UI/system/components/justep/model/model" xid="model" style="left:18px;top:83px;height:244px;">
  </div>  
  <div component="$UI/system/components/justep/panel/panel"
    class="x-panel x-full" xid="panel1">
      <div class="x-panel-top" xid="top1">
        <div component="$UI/system/components/justep/titleBar/titleBar" title="标题"
          class="x-titlebar">
          <div class="x-titlebar-left">
            <a component="$UI/system/components/justep/button/button"
              label="" class="btn btn-link btn-only-icon" icon="icon-chevron-left"
              onClick="{operation:'window.close'}" xid="backBtn">
              <i class="icon-chevron-left"/>  
              <span>返回</span>
            </a>
          </div>  
          <div class="x-titlebar-title">标题</div>  
          <div class="x-titlebar-right reverse">
          </div>
        </div>
      </div>  
      
      <div class="x-panel-content" xid="content1">
                      <div class="city-ind word-4">
                                <nav class="navbar navbar-default" component="$UI/system/components/bootstrap/navbar/navbar" xid="navbar1">
                                    <div class="container-fluid" xid="div1">
                                      <div class="collapse navbar-collapse in" xid="div3">
                                        <ul component="$UI/system/components/bootstrap/navs/navs" class="nav navbar-nav"
                                          xid="navs1">
                                          <li class="active">
                                            <a href="#aa">A</a>
                                          </li>
                                          <li class="">
                                            <a href="#bb">B</a>
                                          </li>
                                          <li class="">
                                            <a href="#cc">C</a>
                                          </li>
                                          <li class="">
                                            <a href="#dd">D</a>
                                          </li>
                                          <li class="">
                                            <a href="#ee">E</a>
                                          </li>
                                          <li class="">
                                            <a href="#ff">F</a>
                                          </li>
                                        </ul>
                                      </div>
                                          </div>
                                </nav>  
                        </div>
                          <div class="city-list">
                                  <div component="$UI/system/components/bootstrap/scrollSpy/scrollSpy" xid="scrollSpy1"
                                            class="scrollspy" style="height:600px;" selector='[xid="div3"]'>
                                          
                                           <ul class="clacity word-2" xid="listCity">
                                            <li class="firstHead" id="aa">A</li>
                                            <li>长春1</li>
                                                <li>长春2</li>
                                                <li>长春3</li>
                                                <li>长春4</li>
                                                <li>长春5</li>
                                            <li class="firstHead" id="bb">B</li>
                                            <li>长春21</li>
                                                <li>长春22</li>
                                                <li>长春23</li>
                                                <li>长春24</li>
                                                <li>长春25</li>
                                            <li class="firstHead" id="cc">C</li>
                                            <li>长春33</li>
                                                <li>长春26</li>
                                                <li>长春27</li>
                                                <li>长春28</li>
                                                <li>长春29</li>
                                            <li>长春42</li>
                                                <li>长春43</li>
                                                <li>长春45</li>
                                                <li>长春46</li>
                                                <li>长春47</li>
                                            <li class="firstHead" id="dd">D</li>
                                            <li>长春222</li>
                                                <li>长春223</li>
                                                <li>长春224</li>
                                                <li>长春225</li>
                                                <li>长春226</li>
                                            <li class="firstHead" id="ee">E</li>
                                            <li>长春233</li>
                                                <li>长春234</li>
                                                <li>长春235</li>
                                                <li>长春236</li>
                                                <li>长春237</li>
                                                <li>长春245</li>
                                                <li>长春246</li>
                                                <li>长春2467</li>
                                                <li>长春2455</li>
                                                <li>长春2566</li>
                                            <li class="firstHead" id="ff">F</li>
                                            <li>长春245</li>
                                                <li>长春246</li>
                                                <li>长春2467</li>
                                                <li>长春2455</li>
                                                <li>长春2566</li>
                                                <li>长春245</li>
                                                <li>长春246</li>
                                                <li>长春2467</li>
                                                <li>长春2455</li>
                                                <li>长春2566</li>
                                        </ul>
                                  </div>
                          </div>        
      
      </div>
   
  </div>
</div>

liangyongfei

bitlsy 发表于 2016-12-19 18:41
只是偶尔可以，大部分时间是不行的，尤其是条目多增加一些，问题就突出了。我基本上是按照那个案例修改的， ...

你好楼主，您反馈的这个现象通过验证是产品缺陷，我们已提交到产品组(内部编号：2016122000001)，感谢楼主的支持与配合。

bitlsy

虽然scrollView也可以实现，但需要写很多的代码，且与scrollSpy比，效果差很远。

scrollSpy确实是一个非常非常好的组件，如果还能做到配置型就是完美无缺了，就是bar可以放到左边、右边、上边、下边等。
哈哈，我们的要求总是无止境的。

请结贴，感谢wex5工程师们的不懈努力！