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

约定不等于承诺〃 2022-04-24 12:52 665阅读 0赞

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;color:#898989;">{
       {item.book_detail}}</view>
                  </view>
                  <view class="info_content">
                    <view style="width:200px;">{
       {item.book_comments}} 留言</view>
                    <view style="width:200px;">{
       {item.book_browse}} 浏览</view>
                    <view><image src="{
       {item.book_sender_icon}}" style="width:12px;height:12px;border-radius:50%;display: flex;overflow:hidden;text-align: center;margin-right: 5px;"></image></view>
                    <view class="one_line" style="width:120px;">{
       {item.book_sender}}</view>
                  </view>
                </view>
              </view>
            </block>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="item_list">
            <block wx:for="{
       {inList}}" wx:key="in">
              <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;color:#898989;">{
       {item.book_detail}}</view>
                  </view>
                  <view class="info_content">
                    <view style="width:200px;">{
       {item.book_comments}} 留言</view>
                    <view style="width:200px;">{
       {item.book_browse}} 浏览</view>
                    <view><image src="{
       {item.book_sender_icon}}" style="width:12px;height:12px;border-radius:50%;display: flex;overflow:hidden;text-align: center;margin-right: 5px;"></image></view>
                    <view class="one_line" style="width:120px;">{
       {item.book_sender}}</view>
                  </view>
                </view>
              </view>
            </block>
            </view>
          </swiper-item>
        </swiper>    
      </view>

wxss文件：

.torch_lists{
      background-color: #f4f4f4;
    }
    .navbg{
      width:95%;
      background-color: #898989;
      height:40px;
      margin:0 auto;
      display: flex;
      flex-direction: row;
    }
    .select{
      width:50%;
      height:40px;
      line-height: 40px;
      text-align:center;
      color: #494949;
      font-size: 15px;
      margin: 0 auto;
      background-color: #ffffff;
    }
    .normal{
      width: 50%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #ffffff;
      font-size: 15px;
      margin: 0 auto;
    }
    .main_content{
      padding-bottom: 8px;
    }
    .main_content_title{
      display:flex;
      flex-direction:row;
      align-items: center;
      font-size: 15px;
      color: #494949;
    }
    .info_content{
      display:flex;
      flex-direction:row;
      align-items: center;
      font-size: 10px;
      color: #494949;
    }
    
    .item_list{
      width:95%;
      margin: 0 auto;
      background-color: #f4f4f4;
    }
    .item_background{
      width:95%;
      margin: 0 auto;
      border-radius: 5px;
      padding-top: 8px;
      display: flex;
      align-items: center;
      justify-content: center; 
    }
    .item{
      width:95%;
      height: 60px;
      background-color: #ffffff;
      margin: 0 auto;
      padding: 8px;
    }
    .one_line{
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    swiper-item {
      overflow: scroll;
    }
    swiper{
      height: 75vh;
    }
    .line{
      height: 8px;
      background-color: #f4f4f4;
    }

js文件：

数据部分：
    data: {
        currentTab: 0,
        sentList: [
          {
            book_name: "计算机组成原理与汇编",
            book_detail: "这是一本专业书。",
            book_comments: "0",
            book_browse: "13",
            book_sender_icon: "../../images/user/1_test.jpg",
            book_time: "2019-4-21",
          },
          {
            book_name: "并行计算",
            book_detail: "这也是一本专业书。",
            book_comments: "0",
            book_browse: "13",
            book_sender_icon: "../../images/user/1_test.jpg",
            book_time: "2019-4-21",
          },
          {
            book_name: "叙事学导论",
            book_detail: "这不是计算机专业的书。",
            book_comments: "3",
            book_browse: "21",
            book_sender_icon: "../../images/user/1_test.jpg",
            book_time: "2019-4-21",
          },
        ],
      },
    
    函数部分：
      switchNav: function (e) {
        var id = e.currentTarget.id;
        this.setData({ currentTab: id });
      },
    
      change: function (e) {
        var cur = e.detail.current;
        this.setData({
          currentTab: cur
        })
      },
    
      itemDetail: function (e) {
        wx.navigateTo({
          url: '../../pages/item_detail/item_detail',
        })
      },

第一次写小程序，开始时用到了swiper页面切换，实现了页面与标签的绑定。由于后来不再需要这个页面切换功能了，因此在删除代码前记录一下。新手小白，望大家不吝赐教！

学习过程中的参考内容：  
[https://blog.csdn.net/qq\_32723451/article/details/80157328][https_blog.csdn.net_qq_32723451_article_details_80157328]

[https://blog.csdn.net/rechal\_mei/article/details/83829543][https_blog.csdn.net_rechal_mei_article_details_83829543]

[https_blog.csdn.net_qq_32723451_article_details_80157328]: https://blog.csdn.net/qq_32723451/article/details/80157328
[https_blog.csdn.net_rechal_mei_article_details_83829543]: https://blog.csdn.net/rechal_mei/article/details/83829543