小程序切换滑动上拉加载
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
猜你在找的微信小程序相关文章
