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

最新推荐文章于 2024-07-09 22:57:28 发布

AnonymousColt

最新推荐文章于 2024-07-09 22:57:28 发布

阅读量2k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/AnonymousColt/article/details/89511533

版权

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

摘要由CSDN通过智能技术生成

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}}</view>
                </view>
                <view class="one_line" style="font-size:12px;c