微信小程序实现顶部swiper页面切换

微信小程序顶部swiper页面切换实现记录

最新推荐文章于 2025-10-22 15:58:34 发布

原创

最新推荐文章于 2025-10-22 15:58:34 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

本文记录了新手在微信小程序中使用swiper实现页面切换的实践过程，包括wxml、wxss和js文件的编写。虽然最终该功能被移除，但为后续学习提供了参考。文中提到了两篇优快云博客作为学习资料。

wxml文件：

<view class="torch_lists">
    <view class="navbg">
      <view id="0" class="{
  
  {currentTab==0?'select':'normal'}}" bindtap="switchNav">我发布的</view>
      <view id="1" class="{
  
  {currentTab==1?'select':'normal'}}" bindtap="switchNav">我接收的</view>
    </view>

    <swiper duration="100" current="{
  
  {currentTab}}" bindchange="change">
      <swiper-item>
        <view class="item_list">
        <block wx:for="{
  
  {outList}}" wx:key="out">
          <view class="item_background">
            <view class="item" bindtap="itemDetail">
              <view class="main_content">
                <view class="main_content_title">
                  <view class="one_line" style="width:400px;padding-right:10px;">{
  
  {item.book_name}}</view>
                  <view style="width:100px">{
  
  {item.book_state}}