微信小程序导航条

wxml部分：

<!-- 复制一下看看 -->
<!--导航条-->
<scroll-view class="scroll-view" scroll-x="true" style="width: 100%;white-space:nowrap;">

  <view class="navbar">
    <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique"
      bindtap="navbarTap">{{item}}</text>
  </view>

</scroll-view>

<swiper class="order" bindchange="scroll" current="{{currentTab}}" autoplay="{{false}}"
  style="width:{{sys_width}}px;height:{{sys_height}}px">


  <!--全部-->
  <swiper-item scroll-y="{{true}}" style="width:{{sys_width}}px;height:{{sys_height}}px;overflow: scroll;"
    class="swiper-item">

    <view class="list" wx:for="{{list}}">
      <view class="ima">
        <image src="{{item.image}}" mode="aspectFill"></image>
      </view>

      <view class="tex">
        <text class="name">{{item.name}}</text>
        <text class="estate">{{item.estate}}</text>
        <text class="date">{{item.date}}</text>
      </view>
    </view>

    <view class="list2" wx:for="{{list2}}">

      <view class="ima">
        <image src="{{item.image}}" mode="aspectFill"></image>
      </view>

      <view class="tex">
        <text class="name">{{item.name}}</text>
        <text class="estate-2">{{item.estate2}}</text>
        <text class="date">{{item.date}}</text>
      </view>

    </view>

  </swiper-item>

  <!--借书单-->
  <swiper-item scroll-y="{{true}}" style="width:{{sys_width}}px;height:{{sys_height}}px;overflow: scroll;">
    <text>这是借书单。这是借书单。这是借书单。这是借书单。
      \n这是借书单。这是借书单。
      \n这是借书单。这是借书单。这是借书单。这是借书单。这是借书单。
      \n这是借书单。这是借书单。这是借书单。
    </text>
  </swiper-item>

  <!--买书单-->
  <swiper-item scroll-y="{{true}}" style="width:{{sys_width}}px;height:{{sys_height}}px;overflow: scroll;">
    这是买书单。这是买书单。这是买书单。这是买书单。这是买书单。这是买书单。这是买书单。这是买书单。这是买书单。这是买书单。这是买书单。这是买书单。这是买书单。这是买书单。这是买书单。这是买书单。这是买书单。这是买书单。这是买书单。这是买书单。这是买书单。这是买书单。这是买书单。
  </swiper-item>

</swiper>

---

---

wxss部分：

/* 页面总体布局 */
.order{
  padding-left:26rpx;
  padding-right: 26rpx;
  padding-top: 12rpx;
  box-sizing: border-box;
  background-color: #dbdbdb85;
}
/* 单个书单 */
.list, .list2 {
  background-color: white;
  border-radius: 10rpx;
  display: flex;
  padding: 18rpx;
  box-sizing: border-box;
  margin-bottom: 12rpx;
}

.ima image {
  width: 80rpx;
  height: 120rpx;
  border-radius: 8rpx;
  overflow: hidden;
}

.ima {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.tex {
  display: flex;
  flex-direction: column;
  flex: 5;
  padding-left: 24rpx;
  box-sizing: border-box;
}

.name {
  font-size: 34rpx;
}

.estate {
  font-size: 24rpx;
}

.estate-2 {
  font-size: 24rpx;
  color: rgb(146, 224, 159);
}

.date {
  font-size: 24rpx;
  color: #ccc;
}

/* 这还是复制 */
page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.navbar {
  flex: none;
  display: flex;
  background: #fff;
  border-radius: 10rpx;
}

.navbar .item {
  position: relative;
  flex: auto;
  text-align: center;
  line-height: 80rpx;
}

.navbar .item.active {
  color: green;
}

.navbar .item.active:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4rpx;
  background: green;
}

---

---

JS部分：

// 这仍然是复制（手动滑稽）

const app = getApp()
Page({
  data: {
    navbar: ['全部', '借书单', '买书单'],
    currentTab: 0,
    
    // 获取当前使用手机的宽高，以展示页面宽高
    sys_width:app.globalData.sys_info.windowWidth,
    sys_height:app.globalData.sys_info.windowHeight,

    list: [{
      image: "https://i0.hdslb.com/bfs/bangumi/image/7ead54c7d4dcf6b0eb5b80e26c3cbdc34854f436.jpg@165w_210h.jpg",
      name: "JAVA基础入门",
      estate: "剩余12天1小时",
      date: "借书时间： 10月8日 17:13"
    },
    {
      image: "https://i0.hdslb.com/bfs/bangumi/image/7ead54c7d4dcf6b0eb5b80e26c3cbdc34854f436.jpg@165w_210h.jpg",
      name: "JAVA基础入门",
      estate: "剩余12天1小时",
      date: "借书时间： 10月8日 17:13"
    },
    {
      image: "https://i0.hdslb.com/bfs/bangumi/image/7ead54c7d4dcf6b0eb5b80e26c3cbdc34854f436.jpg@165w_210h.jpg",
      name: "JAVA基础入门",
      estate: "剩余12天1小时",
      date: "借书时间： 10月8日 17:13"
    },
    {
      image: "https://i0.hdslb.com/bfs/bangumi/image/7ead54c7d4dcf6b0eb5b80e26c3cbdc34854f436.jpg@165w_210h.jpg",
      name: "JAVA基础入门",
      estate: "剩余12天1小时",
      date: "借书时间： 10月8日 17:13"
    },
    {
      image: "https://i0.hdslb.com/bfs/bangumi/image/7ead54c7d4dcf6b0eb5b80e26c3cbdc34854f436.jpg@165w_210h.jpg",
      name: "JAVA基础入门",
      estate: "剩余12天1小时",
      date: "借书时间： 10月8日 17:13"
    },
    {
      image: "https://i0.hdslb.com/bfs/bangumi/image/7ead54c7d4dcf6b0eb5b80e26c3cbdc34854f436.jpg@165w_210h.jpg",
      name: "JAVA基础入门",
      estate: "剩余12天1小时",
      date: "借书时间： 10月8日 17:13"
    },
    {
      image: "https://i0.hdslb.com/bfs/bangumi/image/7ead54c7d4dcf6b0eb5b80e26c3cbdc34854f436.jpg@165w_210h.jpg",
      name: "JAVA基础入门",
      estate: "剩余12天1小时",
      date: "借书时间： 10月8日 17:13"
    },
    {
      image: "https://i0.hdslb.com/bfs/bangumi/image/7ead54c7d4dcf6b0eb5b80e26c3cbdc34854f436.jpg@165w_210h.jpg",
      name: "JAVA基础入门",
      estate: "剩余12天1小时",
      date: "借书时间： 10月8日 17:13"
    },
    {
      image: "https://i0.hdslb.com/bfs/bangumi/image/7ead54c7d4dcf6b0eb5b80e26c3cbdc34854f436.jpg@165w_210h.jpg",
      name: "JAVA基础入门",
      estate: "剩余12天1小时",
      date: "借书时间： 10月8日 17:13"
    }
    ],

    list2: [{
      image: "https://i0.hdslb.com/bfs/bangumi/image/7ead54c7d4dcf6b0eb5b80e26c3cbdc34854f436.jpg@165w_210h.jpg",
      name: "JAVA基础入门",
      estate2: "已还 10月18日",
      date: "借书时间： 10月8日 17:13"
    },
    {
      image: "https://i0.hdslb.com/bfs/bangumi/image/7ead54c7d4dcf6b0eb5b80e26c3cbdc34854f436.jpg@165w_210h.jpg",
      name: "JAVA基础入门",
      estate2: "已还 10月18日",
      date: "借书时间： 10月8日 17:13"
    },
    {
      image: "https://i0.hdslb.com/bfs/bangumi/image/7ead54c7d4dcf6b0eb5b80e26c3cbdc34854f436.jpg@165w_210h.jpg",
      name: "JAVA基础入门",
      estate2: "已还 10月18日",
      date: "借书时间： 10月8日 17:13"
    }
    ]
  },

  navbarTap: function (e) {
    console.log(e);
    this.setData({
      currentTab: e.currentTarget.dataset.idx
    })
  },
  scroll: function (e) {
    this.setData({
      currentTab: e.detail.current,
    })
  }
})

---

---

JSON部分：

{
  "navigationBarTitleText": "个人订单"
}

---

---

效果图：