小程序-滑动导航

home1.wxml

   
      
         
            
               
                 {{item}}               
               
            
         
      
   




  
   
      
         
      
   
   
   
    
   
   
    
   
   
     军事军事军事军事军事军事
   
   
     精华精华精华精华精华精华精华
   
   
     穿越穿越穿越穿越穿越穿越穿越
   
   
     爆料爆料爆料爆料爆料爆料爆料
   

home1.ts

Page({

  /**
   * 页面的初始数据
   */
  data: {
    scrollviewTitle:[
      'Vip专享','视频','图片','军事','精华','穿越','爆料'
    ],
    currentIndex:0,
    winHeight:100,
    vipTotalPages:2,
    vipPages:1,
    vipArray:[]  
  },
  changeCurrentIndex:function(e){
    this.setData({
      currentIndex:e.currentTarget.id
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
     //第一次加载vip内容时，加载第1页
     this.loadVip(this.data.vipPages);
  },
  loadVip:function(pages){
     var url="https://m2.qiushibaike.com/article/list/text?type=refresh&count=12&page="+pages;
     wx.request({
       url:url,
       success:res=>{
         console.log(res.data.items)
         var vipArr=[...this.data.vipArray,...res.data.items]
         this.setData({
           vipArray:vipArr
         })
         wx.getSystemInfo({
          success:(result)=>{
            console.log(result.windowHeight);
            this.setData({
           //  winHeight:result.windowHeight * (vipArr.length*9)/4
           winHeight:result.windowHeight * vipArr.length * 1.8
            })
          },
        })
        this.setData({
          vipPages:pages
        })
       }
     });
     
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
     console.log("下拉")
     if(this.data.currentIndex==0){//vip
      this.loadVip(this.data.vipPages+1);
     }
     if(this.data.currentIndex==1){//视频

     }
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
     console.log("上推")
     if(this.data.currentIndex==0){//vip
      if(this.data.vipPages>this.data.vipTotalPages){
        wx.showToast({
          title:"到低了不能在加载了！"
        })
     }else{
      this.loadVip(this.data.vipPages+1);
     }
      
     }
     if(this.data.currentIndex==1){//视频

     }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

home1.json

{
  "usingComponents": {},
  "enablePullDownRefresh": true  
}

home1.wxss

/* pages/home1/home1.wxss */
.bg{
  height: 100rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #ffba1e;
  color: #fff;
}
.nav{
  width: 100%;
  height:100%;
}
.scrollview{
  display: flex;
  margin-left: 20rpx;
  height:100%;
}
.selected,.normal{
  width:140rpx;
  height:70rpx;
  line-height: 80rpx;
  text-align: center;
  padding: 0 20rpx;
  font-weight: bold;
  color: red;
  border-bottom: 5rpx solid white;
}
.normal{
  color: black;
  border-bottom: none;
}
.hr{
  width:100%;
  height:10rpx;
  background-color: #ccc;
}

vip.wxml

   
      
      
         {{item.id}}
      
      
         
         
        
      
      
         {{item.user.login}}
      
      
           {{item.content}}
      
      
          点赞：{{item.votes.up}}/粢：{{item.votes.down}}/评论数:{{item.comments_count}}/转发数：{{item.share_count}}