小程序顶部可滚动导航

Posted ankle

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序顶部可滚动导航相关的知识,希望对你有一定的参考价值。

需求是 小程序做头部做导航分类的效果

 

顶部用 scroll-view 组件横向滚动,类似tab选项卡的效果,内容用类似模板方式引用,可重复利用

<scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%">
    <view wx:for="{{classify}}" wx:key="id" data-type="{{item.id}}" class="scroll-view-item_H {{curTab==item.id?\'sv-item-on\':\'sv-item-off\'}}" bindtap="classifyClick">
      {{item.name}}
    </view>
</scroll-view>

  <block wx:if="{{curTab ==0}}"> <include src="recommend.wxml"/> </block>
  <block wx:elif="{{curTab==1}}"> <include src="fuli.wxml"/> </block>
  <block wx:elif="{{curTab==2}}"> <include src="other.wxml"/> </block>
  <block wx:elif="{{curTab==3}}"> <include src="other.wxml"/> </block>
  <block wx:elif="{{curTab==4}}"> <include src="other.wxml"/> </block>
  <block wx:elif="{{curTab==5}}"> <include src="other.wxml"/> </block>
  <block wx:else> <include src="other.wxml"/> </block>

 

以上是关于小程序顶部可滚动导航的主要内容,如果未能解决你的问题,请参考以下文章

滚动时修复顶部的两个导航栏

小程序各种功能代码片段整理---持续更新

BootStrap实用代码片段(持续总结)

微信小程序--仿京东UI样式顶部导航栏

菜鸟必知的几个Axure小设计

微信小程序tab切换,可滑动切换,导航栏跟随滚动实现