在小程序开发中如何实现一个tab标签页-创新互联

本篇文章为大家展示了在小程序开发中如何实现一个tab标签页，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

专注于为中小企业提供网站设计、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业彰武免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了1000+企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

具体内容如下

页面效果：

HTML：

<view wx:if="{{userType==0}}" >
 <view class="tab_box" >
  <view class="tabs_v">
  <block wx:for="{{tabs}}" wx:for-item="item" wx:key="index">
   <view class="tab_v {{index<1&#63;'tab_nature':'tab_course'}}" bindtap='changeCurrentTab_' data-index='{{index}}'
   data-current='{{index}}'>
   <text class="tab_txt {{currentTab==index&#63; 'tab_v_active' : ''}}">{{item.label}}</text>
   </view>
  </block>
  </view>
 </view>
 <!-- tab 容器 -->
 <view class="tabWrap">
  <swiper class="" current="{{currentTab}}" duration="300" bindchange="swiperTab" >
  <!-- 页面1 -->
  <block>
   <swiper-item >
   <view class="" >
    <scroll-view  scroll-y="true" bindscrolltolower='scrollToLower'
    bindscrolltoupper='scrollToUpper' lower-threshold='30' upper-threshold='30'>
    <view >
     页面1
    </view>
    </scroll-view>
   </view>
   </swiper-item>
  </block>
  <!-- 页面2 -->
  <block>
   <swiper-item >
   <view class="" >
    <scroll-view  scroll-y="true" bindscrolltolower='scrollToLower'
    bindscrolltoupper='scrollToUpper' lower-threshold='30' upper-threshold='30'>
    <view >
     页面2
    </view>
    </scroll-view>
   </view>
   </swiper-item>
  </block>
  </swiper>
 </view>
</view>

网站栏目：在小程序开发中如何实现一个tab标签页-创新互联
文章起源：https://www.cdcxhl.com/article12/shjgc.html

成都网站建设公司_创新互联，为您提供App开发、Google、响应式网站、域名注册、软件开发、网站营销

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联