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

wxml文件：

    
      我发布的
      我接收的
    

    
      
        
        
          
            
              
                
                  {{item.book_name}}
                  {{item.book_state}}
                
                {{item.book_detail}}
              
              
                {{item.book_comments}} 留言
                {{item.book_browse}} 浏览
                
                {{item.book_sender}}
              
            
          
        
        
      
      
        
        
          
            
              
                
                  {{item.book_name}}
                  {{item.book_state}}
                
                {{item.book_detail}}
              
              
                {{item.book_comments}} 留言
                {{item.book_browse}} 浏览
                
                {{item.book_sender}}
              
            
          
        
        
      
        
  

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/rechal_mei/article/details/83829543