微信小程序学习用demo：tab分页效果

柿霖不是林 · 发表于 2017-1-11 12:40:08

制作者：呦丶耍脾气

[mw_shl_code=html,true]var gid=0;//具体分页逻辑请根据自己的项目来写哦，这里都是直接固定数据串测试的
Page({
  data: {
hotActivity: {
   start: 0,
   hasMore: true,
   list: []
},
hotVillage: {
   start: 0,
   hasMore: true,
   list: []
},
pageTab: {
   curHdIndex: 0,
   curBdIndex: 0
},
  },
  //点击导航
  pageHdtap: function (e) {
//点击子元素
var _datasetId = e.target.dataset.id;
var _leftObj = {};
_leftObj.curHdIndex = _datasetId;
_leftObj.curBdIndex = _datasetId;
this.setData({
   pageTab: _leftObj
});
if (_datasetId == 1) {
   gid=0;
   //初始化热门乡村第一页数据
   this.hotVillageLoadMore();
}
  },
  hotActivityLoadMore: function (e) {
console.log("----")
var that = this;
if (that.data.hotActivity.hasMore == true) {
   var list = [
      {
      id: ++gid,
      icon: 'http://img3.imgtn.bdimg.com/it/u=342313828,3630741869&fm=21&gp=0.jpg',
      title: '1111'
      },
      {
      id: ++gid,
      icon: 'http://img4.imgtn.bdimg.com/it/u=2065190685,2426927435&fm=21&gp=0.jpg',
      title: '222'
      },
      {
      id: ++gid,
      icon: 'http://img5.imgtn.bdimg.com/it/u=3038437850,187741563&fm=23&gp=0.jpg',
      title: '333'
      },
      {
      id: ++gid,
      icon: 'http://img5.imgtn.bdimg.com/it/u=1378185923,2542053582&fm=21&gp=0.jpg',
      title: '444'
      },
      {
      id: ++gid,
      icon: 'http://img4.imgtn.bdimg.com/it/u=1088058652,4085646574&fm=23&gp=0.jpg',
      title: '555'
      }
   ];

   var newData = that.data.hotActivity.list;
   newData = newData.concat(list);

   var newList = {};
   newList.start = 6;//这个服务器返回，现在是固定数据测试
   newList.hasMore = true;//这个服务器返回，现在是固定数据测试
   newList.list = newData;
   that.setData({ hotActivity: newList });

   console.log(that.data.hotActivity)
}
  },
  hotVillageLoadMore: function (e) {
var that = this;
if (that.data.hotVillage.hasMore == true) {
   var list = [
      {
      id: ++gid,
      icon: 'http://img4.imgtn.bdimg.com/it/u=1088058652,4085646574&fm=23&gp=0.jpg',
      title: '1111'
      },
      {
      id: ++gid,
      icon: 'http://img1.imgtn.bdimg.com/it/u=122231395,3709886574&fm=21&gp=0.jpg',
      title: '222'
      },
      {
      id: ++gid,
      icon: 'http://img4.imgtn.bdimg.com/it/u=2065190685,2426927435&fm=21&gp=0.jpg',
      title: '333'
      },
      {
      id: ++gid,
      icon: 'http://img4.imgtn.bdimg.com/it/u=4178115592,1070031304&fm=21&gp=0.jpg',
      title: '444'
      },
      {
      id: ++gid,
      icon: 'http://img2.imgtn.bdimg.com/it/u=2319161872,3820651730&fm=21&gp=0.jpg',
      title: '555'
      }
   ];

   var newData = that.data.hotVillage.list;
   newData = newData.concat(list);

   var newList = {};
   newList.start = 6;//这个服务器返回，现在是固定数据测试
   newList.hasMore = true;//这个服务器返回，现在是固定数据测试
   newList.list = newData;
   that.setData({ hotVillage: newList });
}
  },
  onLoad: function (options) {

//初始话热门活动第一页数据
this.hotActivityLoadMore();
//this.hotVillageLoadMore();
  }
})[/mw_shl_code]

游客，如果您要查看本帖隐藏内容请回复

一世迷离 · 发表于 2017-1-14 11:06:43

tab分页效果

jerry369 · 发表于 2020-4-25 14:24:10

我有流量，你有产品，我们就可以合作，有意的个人开发者朋友可以联系微信号jim20180688，详聊

		自动登录	找回密码
密码			立即注册

微信小程序学习用demo：tab分页效果

本帖子中包含更多资源