微信小程序顶部可滚动导航效果

微信小程序顶部可滚动导航效果
最近领导安排做一个小程序之做头部做导航分类效果，下面小编给大家分享实现代码，需要的朋友参考下吧

如何做一个小程序之做头部做导航分类效果，下面小编给大家分享实现代码，需要的朋友参考下吧，希望能帮助到大家。

顶部用 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?&#39;sv-item-on&#39;:&#39;sv-item-off&#39;}}" 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>