首页 > 其他 > 详细

小程序顶部可滚动导航

时间:2017-10-31 16:11:18      阅读:190      评论:0      收藏:0      [点我收藏+]

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

技术分享

 

顶部用 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>

 

小程序顶部可滚动导航

原文:http://www.cnblogs.com/inzaghihao/p/7762026.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!