公告列表
公告列表
收藏
评论

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">


收藏

11 个评论

  • 招雄彬正在输入。。
    招雄彬正在输入。。
    2021-07-31

    厉害，只不过scrollintoview要setData

    2021-07-31
    赞同
    回复
  • ZAJ
    ZAJ
    2018-06-12

    mark

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

    mark

    2018-04-10
    赞同
    回复
  • TNT
    TNT
    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
    赞同
    回复
  • TNT
    TNT
    2018-03-06

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

    2018-03-06
    赞同
    回复
  • TNT
    TNT
    2018-03-02

    有木有完整的代码。

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

     mark

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

    mark

    2018-01-04
    赞同
    回复
  • TNT
    TNT
    2018-01-02

    mark

    2018-01-02
    赞同
    回复

正在加载...

请 登录 后发表内容