评论

如何使用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  
点赞 30
收藏
评论

12 个评论

  • aholy
    aholy
    2019-07-26

    收藏了

    2019-07-26
    赞同 1
    回复 8
    查看更多(3)
  • ATIP
    ATIP
    04-09

    好牛逼啊,我今天整体百度了一下没找能这么牛逼的案例,大哥太感谢你了

    04-09
    赞同
    回复 1
    • 猫的房东
      猫的房东
      04-12
      优秀啊
      04-12
      回复
  • 人仌众𠈌
    人仌众𠈌
    04-08

    进收藏夹吃灰去吧!

    04-08
    赞同
    回复 1
    • 猫的房东
      猫的房东
      04-09
      打扰了~
      04-09
      回复
  • 根本停不下来
    根本停不下来
    2020-12-22

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

    2020-12-22
    赞同
    回复 5
  • A00~韟邇坣-
    A00~韟邇坣-
    2020-08-27

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

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

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

    2020-07-28
    赞同
    回复 1
    • 猫的房东
      猫的房东
      2020-07-28
      👌
      2020-07-28
      回复
  • huigezizj
    huigezizj
    2020-05-22

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

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

    你是个好人!!!!!!

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

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

    2019-12-19
    赞同
    回复 1
    • 猫的房东
      猫的房东
      2019-12-19
      腻害
      2019-12-19
      回复
  • H  -  LYANG.
    H - LYANG.
    2019-09-19

    很奈斯。

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

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

正在加载...

登录 后发表内容