小程序切换滑动上拉加载
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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。