小程序切换滑动上拉加载(tab切换加载数据)scroll-view实现上拉加载

前端之家收集整理的这篇文章主要介绍了小程序切换滑动上拉加载(tab切换加载数据)scroll-view实现上拉加载前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

小程序切换滑动上拉加载

 Js

var app = getApp();
const _JulijiaUrl = require('../../utils/baseurl');
const requestUtil = require('../../utils/httpHelper');
var GetList = function (that) {
  var page = that.data.page;
  var p = page[that.data.currentTab];
  var typeid = that.data.typedata[that.data.currentTab].id;
  requestUtil.httpGet(_JulijiaUrl.julijia_newslistpage, { page: p, typeid: typeid }, function (res) {
    var pagelist = that.data.listdatat;
    for (var i = 0; i < res.length; i++) 
    {
      pagelist[that.data.currentTab].data.push(res[i]);
    }  
    p++;
    page[that.data.currentTab] = p;
    that.setData({
      listdatat: pagelist,      page: page
    });
  });
}  

Page({
  data: {
    /* 
     
 页面配置 
      */
    winWidth: 0,    winHeight: 0,    // tab切换  
    currentTab: 0,    typedata:'',    listdatat:'',    page:[],    typeid:'',  },  onLoad: function () {
    var that = this;

    / 
      获取系统信息 
     
/
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          winWidth: res.windowWidth,          winHeight: res.windowHeight
        });
      }
    });
    
    /

      请求回调 这里根据自己封装
     
/
    
    requestUtil.httpGet(_JulijiaUrl.julijia_newslist, {}, function (res) {
      / 
        设置分页参数
       
/
      var page = that.data.page;
      for (var p = 0; p < res.typeData.length; p++) {
        page.push(2);
      }
      that.setData({
        typedata: res.typeData,        listdatat: res.listDta,        typeid: res.typeData[0].id
      });
    });
    
  },  /
 
     滑动切换tab 
    
/
  bindChange: function (e) {
    var that = this;
    that.setData({ currentTab: e.detail.current,      typeid: e.target.id
    });
  },  /* 
   
 点击tab切换 
   */
  swichNav: function (e) {

    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current,      });
    }
    that.setData({
      typeid: e.target.dataset.id
    });
  },  /* 
   
 绑定下拉加载 
   */
  bindDownLoad:function(e) {
    var that = this;
    GetList(that);
  },});

/**
 * 样式
 */
.page {
   width: 100%;
}

.content {
  width: 100%;
  height: 100%;
  background: #eee;
}

/首页导航/
.nav {
  display: flex;
  justify-content:space-between; 
  height: 126rpx;
  padding: 20rpx 20rpx 10rpx 20rpx;
  background: #fff; 
}
.nav_title{
  text-align: center;
  border-radius: 10rpx;
  font-family: "微软雅黑";
  font-size: 28rpx;
  width: 160rpx; 
  color: #000;

}
.hover_nav{
  background: #f3f3f3;
  
}
.navicon{
  width: 160rpx; height: 80rpx; 
}
.navicon image{
  width: 56rpx; margin-top: 12rpx;
}
.news{
  
  text-align: center;

}

/幻灯切换/
.txt_p{
  position: relative;
    height: 66rpx;
    line-height: 66rpx;
    display: block;
    background-image: linear-gradient(transparent,#000);
    color: #fff; 
    font-size: 32rpx;
    padding: 0px 26rpx;
    overflow: hidden;
    bottom: 66rpx;
}
.scroll_pic{
  width: 100%; 
  height: 200rpx; margin-top: 400px;
}
.newspic{
 display: flex;
 margin-top: 20rpx;
 font-family: "微软雅黑";
 font-size: 26rpx;
}
.newspic image{
  width: 100px;
  height: 70px;
}

/最新资讯/

.nav_hh{
  clear: both;
  display: flex;
  justify-content:space-between;  
  padding:34rpx 26rpx 0rpx 26rpx; 
}

.navht{
  
  font-family: "微软雅黑";
  font-size: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  color: #333;
  border-left: 8rpx solid #f19c0e;
  padding-left: 16rpx;
  font-weight:900;
   

}

.more{
  
  font-family: "微软雅黑";
  font-size: 24rpx;
  height: 34rpx;
  line-height: 36rpx;
  color: #666;
  border: 1rpx solid #999;
  padding:0 20rpx;
  border-radius: 30rpx;
  margin-top:-10rpx;

}

.newsdiv{
  display: flex;
  justify-content:space-between;  
  padding: 26rpx 26rpx 22rpx 26rpx;
  border-bottom: 1rpx solid #eee;
}

.newstxt{
  font-family: "微软雅黑";
  font-size: 32rpx;
  text-align: left;
  line-height: 1.4;
  color: #000;

}

.newsimg image{
  width: 100px;
  height: 70px;
}

.news_fen{
  font-family: "微软雅黑";
  font-size: 24rpx;
  text-align: left;
  color: #aaa; 
  margin-top: 8rpx;
  font-weight: normal;
}

.news_fen text{
  margin-right: 24rpx;
  
}

.viewpadd{
  width: 100%; 
  margin-top: 24rpx;
  background: #fff;  clear:both; display: inline-block; 

}

.newsdiv:nth-child(4){
  border-bottom: 1rpx solid #fff;
}

.list_bbs:nth-last-child(1){
  border-bottom: 1rpx solid #fff;
}

/在线视频/

.spdiv{
  width: 48%;
  margin:1% 1%;
  float: left;
}

.sppic image{
  width: 100%;
  height: 200rpx; 
  margin-top: 6rpx;
}

.shipinbg{
  width:95%;margin: 0 auto; 
}

.shipinbg .sptxt{
  font-family: "微软雅黑";
  font-size: 28rpx;
  height: 28rpx;
  line-height: 28rpx;
  overflow: hidden;
  text-align: left;
  color: #333; 
  margin-top: 8rpx;
  margin-bottom: 6rpx;
}

.shipin{
  padding-bottom: 10rpx;
}

.shipin .shipinbg{
  padding-top: 10rpx;
}

.jbzx_jb{
  width:95%;margin: 0 auto;  padding-top: 10rpx;
}
.jbzx .spdiv image{
 
  height: 212rpx; 
  margin-top: 6rpx;

}

.jbzx_jb .spdiv{
  width: 23%;
  margin:1% 1%;
  
}
.jbzx_jb .sptxt{
  font-family: "微软雅黑";
  font-size: 28rpx;
  height: 28rpx;
  line-height: 28rpx;
  overflow: hidden;
  text-align: left;
  color: #333; 
  margin-top: 4rpx;
  margin-bottom: 6rpx;
}

.jbzx_jb .shipinbg{
  padding-top: 10rpx;
}
.jbzx{
  padding-bottom: 10rpx;
}

/热门话题/
.bbsdiv{
  width:93%;margin: 0 auto;  padding-top: 10rpx;
}
.list_bbs{
  display: flex;
  justify-content: space-between;
  padding: 30rpx 0; 
  border-bottom: 1rpx solid #eee;
}
.list_bbs .bbs_icon image{
 width: 86rpx; height: 86rpx;
}
.list_bbs .bbs_txt{
 padding-left: 20rpx;  width: 100%;  

}

.list_bbs .bbs_txt .txt_name{
  font-family: "微软雅黑";
  font-size: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  overflow: hidden;
  text-align: left;
  color: #5f991c; 
  margin-top: 4rpx;
  margin-bottom: 20rpx;
}

.list_bbs .bbs_txt .txt_txt{
  font-family: "微软雅黑";
  font-size: 32rpx;
  line-height: 1.4;
  text-align: left;
  color: #333; 
  clear: both;
  margin-bottom: 10rpx; 
  display:inline-block; width: 100%;

}

.list_bbs .bbs_txt .txt_pic image{
  width: 31%;
  margin-right:2%;
  height: 160rpx; 
}

.list_bbs .txt_pic {
 clear: both;
}

.pice{ 
  float: right; margin-right: 20rpx; font-size: 22rpx; color: #999;
}

.pice text{ 
  color: #f30; font-size: 30rpx; margin-right: 6rpx; 
}

.g_txt{
  width: 540rpx;  display: block;overflow:hidden;text-overflow:ellipsis; white-space: nowrap; float: left
}

Json

{
 
   "navigationBarTitleText": "新闻资讯",    "enablePullDownRefresh": true,    "backgroundTextStyle": "dark"

}

wxml



          
          

猜你在找的微信小程序相关文章