小程序开发中点击tab实现左右滑动功能-创新互联

小程序开发中点击tab实现左右滑动功能？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

创新互联建站专业为企业提供富平网站建设、富平做网站、富平网站设计、富平网站制作等企业网站建设、网页设计与制作、富平企业网站模板建站服务，十载富平做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

具体内容如下

wxml

<scroll-view scroll-x="true" class="navbar-box">
 <block wx:for="{{recordMain}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
  <view class="nav-item " data-current="{{idx}}" bindtap="switchNav">
   <text class="{{currentTab == idx &#63; 'active' : ''}}">{{navItem.title}}</text>
  </view>
 </block>
</scroll-view>

<swiper  class="tab-box" current="{{currentTab}}" duration="300" data-current="{{idx}}" bindchange="switchTab">
 <swiper-item  wx:for="{{[0,1,2,3,4,5]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-cnetent">
  <block wx:for="{{tabContent}}" wx:key=" " bindtap='myOrderDetails'>
   <!-- 列表 -->
   <view class='listBox'> 
     <view class='listTop'>
      <image src='{{item.goodsImg}}' class='goodsImg'></image>
      <view class='infor'>
       <view class=''>
        <text class='name'>{{item.name}}</text>
        <text class='price'>&yen;{{item.price}}</text>
       </view>
       <view class=''>
        <text class='choose'>{{item.choose}}</text>
        <text class='number'>×{{item.number}}</text>
       </view>
      </view>
     </view>
     <view class='listBottom'>
      <view>共{{item.number}}件商品,合计：&yen;{{item.allPrice}}</view>
      <view class='status'>
       <button>查看物流</button>
       <button>确认收货</button>
      </view>
     </view> 
   </view>
  </block>
 </swiper-item>
</swiper>

网页题目：小程序开发中点击tab实现左右滑动功能-创新互联
文章网址：/article46/dshohg.html

成都网站建设公司_创新互联，为您提供网站导航、定制开发、企业网站制作、网站营销、手机网站建设、建站公司

广告

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