收藏
评论

scroll-view滚动导航自动伪居中实现

注:每个选项卡固定宽度


官方文档中通过scroll-into-view可以控制scroll-view定点滚动

<scroll-view class="scroll-nav"

scroll-x="{{true}}"

scroll-with-animation="true"

scroll-into-view="item{{currentTab}}"

scroll-left="{{scrollLeftSys}}"

bindscroll="scrollNav">

    <view class="scroll-nav-item {{currentTab == index ? 'scroll-nav-item-active' : ''}}" id="item{{index}}" wx:for="{{[1,2,3,4,5,6,7,8,9]}}" data-index="{{index}}" bindtap="clickNav">标题{{item}}</view>
</scroll-view>

clickNav(e){
  this.setData({
    currentTab: e.currentTarget.dataset.index
  })
}


效果如下


缺点就是从后往前点的时候,到第3个就没法继续点了,需要主动滑动scroll-view才能点到前面几个选项卡。


实现伪居中:

让点击前四个的时候scroll-view不滚动,即currentTab保持为0

在点击第5个的时候,屏幕内最左测是第2个,相差3个,后面的选项卡依此类推都减3


<scroll-view class="scroll-nav"

scroll-x="{{true}}"

scroll-with-animation="true"

scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}"

scroll-left="{{scrollLeftSys}}"

bindscroll="scrollNav">


最后一次编辑于  2018-01-01
赞 0
收藏

10 个评论

  • ZAJ
    ZAJ
    2018-06-12

    mark

    2018-06-12
    赞同
    回复
  • Bing_John
    Bing_John
    2018-04-10

    mark

    2018-04-10
    赞同
    回复
  • 仙森ღ₅₂₀¹³¹⁴
    仙森ღ₅₂₀¹³¹⁴
    2018-03-12

    好的。谢谢。我还以为下面也是用的scroll-view。

    2018-03-12
    赞同
    回复
  • Sinea
    Sinea
    2018-03-12

    导航用的scroll-view,下面多列表组合用的swiper,上下就是index对应。

    scroll-view里的id主要是为了实现scroll-into-view

    2018-03-12
    赞同
    回复
  • 仙森ღ₅₂₀¹³¹⁴
    仙森ღ₅₂₀¹³¹⁴
    2018-03-06

    楼主在吗 想知道下面全屏滚动这部分怎么写 跟上面的怎么对应上,带上id吗?

    2018-03-06
    赞同
    回复
  • 仙森ღ₅₂₀¹³¹⁴
    仙森ღ₅₂₀¹³¹⁴
    2018-03-02

    有木有完整的代码。

    2018-03-02
    赞同
    回复
  • 凡人
    凡人
    2018-02-05

     mark

    2018-02-05
    赞同
    回复
  • 永恒君
    永恒君
    2018-01-04

    mark

    2018-01-04
    赞同
    回复
  • 仙森ღ₅₂₀¹³¹⁴
    仙森ღ₅₂₀¹³¹⁴
    2018-01-02

    mark

    2018-01-02
    赞同
    回复
  • 红鲤鱼与绿鲤鱼与驴
    红鲤鱼与绿鲤鱼与驴
    2018-01-02

    mark

    2018-01-02
    赞同
    回复