评论

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

简单的导航条

刚刚在社区里看到 有老哥在问如何做滚动的导航栏。这里简单给他写了个代码片段,需要的大哥拿去随便改改:

代码如下:

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/GSG8tUmJ7XaI

最后一次编辑于  10-04  (未经腾讯允许,不得转载)
点赞 7
收藏
评论

4 个评论

  • aholy.bacii
    aholy.bacii
    07-26

    收藏了

    07-26
    赞同 1
    回复 3
  • dd
    dd
    07-25

    感谢大佬

    07-25
    赞同 1
    回复 6
    • dd
      dd
      07-25
      老哥有做过骨架屏吗
      07-25
      回复
    • 杭州弧途科技有限公司
      杭州弧途科技有限公司
      07-25回复dd
      预计最近会出一篇骨架屏的文章
      07-25
      回复
    • x_Qiang
      x_Qiang
      07-26回复杭州弧途科技有限公司
      666,两个号换着玩哈哈哈哈哈
      07-26
      回复
    • 杭州弧途科技有限公司
      杭州弧途科技有限公司
      07-26回复x_Qiang
      哈哈哈哈哈哈哈哈
      07-26
      回复
    • 仙森ღ₅₂₀¹³¹⁴
      仙森ღ₅₂₀¹³¹⁴
      10-04回复dd
      骨架屏文章已出,在个人中心查看
      10-04
      回复
    查看更多(1)
  • H  -  LYANG.
    H - LYANG.
    09-19

    很奈斯。

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

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

    老哥,好银。

    07-30
    赞同
    回复 1