小程序開發中點擊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實現左右滑動功能-創新互聯
文章網址：http://vcdvsql.cn/article46/dshohg.html

成都網站建設公司_創新互聯，為您提供網站導航、定制開發、企業網站制作、網站營銷、手機網站建設、建站公司

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯