评论

如何使用scroll-view制作左右滚动导航条效果

简单的导航条+swiper切换效果

最新:2020/06/13。修改为scroll-view与swiper联动效果,新增下拉刷新以及上拉加载效果。。具体效果查看代码片段,以下文章内容和就不改了
刚刚在社区里看到 有老哥在问如何做滚动的导航栏。这里简单给他写了个代码片段,需要的大哥拿去随便改改,先看效果图:

代码如下:

wxml
<scroll-view class="scroll-wrapper" scroll-x scroll-with-animation="true" scroll-into-view="item{{currentTab < 4 ? 0 : currentTab - 3}}" >
  <view class="navigate-item" id="item{{index}}" wx:for="{{taskList}}" wx:key="{{index}}" data-index="{{index}}" bindtap="handleClick">
    <view class="names {{currentTab === index ? 'active' : ''}}">{{item.name}}</view>
    <view class="currtline {{currentTab === index ? 'active' : ''}}"></view>
  </view>
</scroll-view>
wxss
.scroll-wrapper {
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  background: #FFF;
  height: 90rpx;
  padding: 0 32rpx;
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.navigate-item {
  display: inline-block;
  text-align: center;
  height: 90rpx;
  line-height: 90rpx;
  margin: 0 16rpx;
}

.names {
  font-size: 28rpx;
  color: #3c3c3c;
}

.names.active {
  color: #00cc88;
  font-weight: bold;
  font-size: 34rpx;
}

.currtline {
  margin: -8rpx auto 0 auto;
  width: 100rpx;
  height: 8rpx;
  border-radius: 4rpx;
}

.currtline.active {
  background: #47CD88;
  transition: all .3s;
}

JS
const app = getApp()

Page({
  data: {
    currentTab: 0,
    taskList: [{
      name: '有趣好玩'
    }, {
      name: '有趣好玩'
    }, {
      name: '有趣好玩'
    }, {
      name: '有趣好玩'
    }, {
      name: '有趣好玩'
    }, {
      name: '有趣好玩'
    }, {
      name: '有趣好玩'
    }, {
      name: '有趣好玩'
    }, {
      name: '有趣好玩'
    }, {
      name: '有趣好玩'
    }, {
      name: '有趣好玩'
    }, {
      name: '有趣好玩'
    }, {
      name: '有趣好玩'
    }, {
      name: '有趣好玩'
    }, {
      name: '有趣好玩'
    }, {
      name: '有趣好玩'
    }, ]
  },
  onLoad() {

  },
  handleClick(e) {
    let currentTab = e.currentTarget.dataset.index
    this.setData({
      currentTab
    })
  },
})
最后奉上代码片段:

https://developers.weixin.qq.com/s/nkyp64mN7fim

最后一次编辑于  2020-06-13  
点赞 53
收藏
评论

20 个评论

  • 哈哈哈
    哈哈哈
    2021-04-08

    进收藏夹吃灰去吧!

    2021-04-08
    赞同
    回复
  • 根本停不下来
    根本停不下来
    2020-12-22

    你这个例子如果能做吸顶效果,又可以左右滑动,互不影响各个选择卡的内容及位置,向上滑又可以加载更多数据,我就真是服你了

    2020-12-22
    赞同
    回复 5
    • TNT
      TNT
      2020-12-22
      。。。。。
      2020-12-22
      回复
    • 根本停不下来
      根本停不下来
      2020-12-26回复TNT
      实现不了吗
      2020-12-26
      回复
    • TNT
      TNT
      2020-12-28回复根本停不下来
      https://developers.weixin.qq.com/s/LNrkJVmr7DmP
      是这样么?
      2020-12-28
      回复
    • 根本停不下来
      根本停不下来
      2020-12-28回复TNT
      是这个意思,前面有占用空间,后面没有占用空间,不太流畅
      2020-12-28
      回复
    • 根本停不下来
      根本停不下来
      2020-12-28回复TNT
      不用下拉刷新,要上拉刷新,吸顶后tab列表才能滑动就更好了,当tab列表滑动到顶部时,外层可以向上拉。京东这个体验真好
      2020-12-28
      回复
  • A0韟邇坣-
    A0韟邇坣-
    2020-08-27

    scroll-view可以横向自动滑到指定位置吗?就是先选了一个靠后的导航,然后点底部切换页面,在点回来的时候scroll-view的位置是之前选的导航的位置,而不是我要从头往后滑才能看见我选中的那个导航(左上角返回不影响,互相跳转页面就不行了,请问有办法解决吗)

    2020-08-27
    赞同
    回复 3
    • TNT
      TNT
      2020-08-27
      可以 用globalData记录滚动的位置。比如点击后 设置globalData下scroll的currentTab,点底部tabbar跳走后,再切回来,onShow里重新赋值给scroll-view的currentTab
      this.setData({
        currentTab: getApp().globalData.currentTab
      })
      2020-08-27
      2
      回复
    • A0韟邇坣-
      A0韟邇坣-
      2020-08-27回复TNT
      2020-08-27
      回复
    • TNT
      TNT
      2020-08-27回复A0韟邇坣-
      嗯嗯
      2020-08-27
      回复
  • 66
    66
    2020-07-28

    这个太棒了,完美解决!!!

    2020-07-28
    赞同
    回复 1
    • TNT
      TNT
      2020-07-28
      👌
      2020-07-28
      回复
  • huigezizj
    huigezizj
    2020-05-22

    老哥你这个高度是定死的吗?需要上拉刷新可以实现吗

    2020-05-22
    赞同
    回复 5
    • TNT
      TNT
      2020-05-22
      可以
      2020-05-22
      回复
    • TNT
      TNT
      2020-05-22
      因为下面是swiper。你用swiper包一层scroll-view使用scrill-view的触底。swiper必须加高度。你可以使用100vh-导航条高度。
      2020-05-22
      1
      回复
    • Mortal
      Mortal
      2020-06-12
      老哥  我用了您的代码  然后现在出现了无法上拉加载更多数据 我也没有思路 请问您有什么方案吗  谢谢
      2020-06-12
      回复
    • 八九
      八九
      2020-06-16回复Mortal
      bindscrolltolower 多看下文档
      https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
      2020-06-16
      1
      回复
    • TNT
      TNT
      2020-07-28回复Mortal
      更新过文章了
      2020-07-28
      回复
  • 名仁华
    名仁华
    2020-04-20

    你是个好人!!!!!!

    2020-04-20
    赞同
    回复 3
    • TNT
      TNT
      2020-04-20
      😂深藏功与名么
      2020-04-20
      回复
    • 名仁华
      名仁华
      2020-04-20回复TNT
      对对对对。嘻嘻~~~
      2020-04-20
      回复
    • TNT
      TNT
      2020-04-20回复名仁华
      0110 0110 0110
      2020-04-20
      回复
  • Oy
    Oy
    2019-12-19

    感谢分享,刚好解决了我的一个问题

    2019-12-19
    赞同
    回复 1
    • TNT
      TNT
      2019-12-19
      腻害
      2019-12-19
      回复
  • HU.
    HU.
    2019-09-19

    很奈斯。

    但是怎样在下面弄一个类似于微商城的页面版块的代码呢?

    2019-09-19
    赞同
    回复 16
    • TNT
      TNT
      2019-09-19
      关联起来就好了。下面内容根据 index 做判断即可
      2019-09-19
      回复
    • HU.
      HU.
      2019-09-19回复TNT
      要怎么关联呢?这方面不太会啊
      2019-09-19
      回复
    • TNT
      TNT
      2019-09-19回复HU.
      是点击上面的 title 下面的 更换不同的样式吧?
      2019-09-19
      回复
    • TNT
      TNT
      2019-09-19回复HU.
      假如点击后 设置了 index等于1。下面的内容 就判断 wx:if="{{index === 1}}"
      2019-09-19
      回复
    • HU.
      HU.
      2019-09-19回复TNT
      意思就是在下面做个产品模板那种。
      2019-09-19
      回复
    查看更多(11)
  • 李军
    李军
    2019-07-30

    老哥,好银。

    2019-07-30
    赞同
    回复 1
    • TNT
      TNT
      2019-07-30
      emmmmmm
      2019-07-30
      回复
  • 2019-07-25

    感谢大佬

    2019-07-25
    赞同
    回复 7
    • 2019-07-25
      老哥有做过骨架屏吗
      2019-07-25
      回复
    • 青团社
      青团社
      2019-07-25回复
      预计最近会出一篇骨架屏的文章
      2019-07-25
      回复
    • x_Qiang
      x_Qiang
      2019-07-26回复青团社
      666,两个号换着玩哈哈哈哈哈
      2019-07-26
      回复
    • 青团社
      青团社
      2019-07-26回复x_Qiang
      哈哈哈哈哈哈哈哈
      2019-07-26
      回复
    • TNT
      TNT
      2019-10-04回复
      骨架屏文章已出,在个人中心查看
      2019-10-04
      回复
    查看更多(2)

正在加载...

登录 后发表内容