微信小程序

首页 -  微信小程序  -  小程序切换滑动上拉加载(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


<!--index.wxml-->
<view class="content">
<!--导航条--> 
<scroll-view class="scroll_v" scroll-x="true" > 
<view class="swiper-tab">  
    <view class="v_nei" wx:for="{{typedata}}" wx:for-index="kt" wx:key="{{index}}" wx:for-item="itemType">
      <view class="swiper-tab-list {{currentTab==kt ? 'on' : ''}}" data-current="{{kt}}" data-id="{{itemType.id}}" bindtap="swichNav">{{itemType.name}}</view>
    </view>  
</view> 
</scroll-view>
  
<swiper current="{{currentTab}}" id="{{typedata[currentTab].id}}" style="height: {{winHeight?winHeight+'px':'auto'}}" class="swiper-box" duration="300" bindchange="bindChange">
  <swiper-item wx:for="{{listdatat}}"  wx:key="{{index}}" wx:for-item="itemBase"  >
   <scroll-view scroll-y="{{true}}" bindscrolltolower="bindDownLoad" lower-threshold="1" style="height: {{winHeight?winHeight+'px':'auto'}}">
    <view class="news viewpadd">
      <view class="nav_hh">
        <view class="navht">{{itemBase.name}}</view>
      </view>
    
    <block  wx:for="{{itemBase.data}}"  wx:key="{{index}}" wx:for-item="itemRow">
      <navigator url="../arc/arc?id={{itemRow.id}}">
       <view class="newsdiv" hover="true" hover-class="hover_nav" hover-stay-time="1000">
          <view class="newstxt">{{itemRow.title}}
            <view class="news_fen"><text>{{itemRow.shengxiao}}</text>{{itemRow.typeName}}</view>
          </view>
          <view class="newsimg">
            <image src="{{itemRow.img}}" mode="widthFix"></image>
          </view>
        </view>
      </navigator>
      </block>
    </view> 
    </scroll-view>
  </swiper-item>
</swiper>
</view>


(2)
分享:

本文由:xiaoshu168 作者:xiaoshu发表,转载请注明来源!

标签:

相关阅读