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

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


制作者：呦丶耍脾气



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();
}
})


**** Hidden Message *****



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

tab分页效果

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

我有流量，你有产品，我们就可以合作，有意的个人开发者朋友可以联系微信号jim20180688，详聊
页: [1]
查看完整版本: 微信小程序学习用demo：tab分页效果