切换风格

加州 简约米色 星空 绿野仙踪 花卉 城市 简约黑色 白云 薰衣草 晚霞 粉色心情 伦敦 雪山 龙珠

回复 1

6

主题

24

帖子

160

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
160
滑动选项卡代码示例[复制链接]
发表于 2017-9-27 15:50:13 | 显示全部楼层 |阅读模式
效果如图:

Page({
  data: {
    showtab:0,  //顶部选项卡索引
    showtabtype:'', //选中类型
    tabnav:{},  //顶部选项卡数据
    testdataall:[],  //所有数据
    testdata1:[], //数据列表
    testdata2:[], //数据列表
    testdata3:[], //数据列表
    testdata4:[], //数据列表
    testdata5:[], //数据列表
    startx:0,  //开始的位置x
    endx:0, //结束的位置x
    critical: 100, //触发切换标签的临界值
    marginleft:0,  //滑动距离
  },
  onLoad: function () {
    this.setData({
      tabnav:{
        tabnum:5,
        tabitem:[
          {
            "id":1,
            "type":"A",
            "text":"tab1"
          },
          {
            "id":2,
            "type":"B",
            "text":"tab2"
          },
          {
            "id":3,
            "type":"C",
            "text":"tab3"
          },
          {
            "id":4,
            "type":"D",
            "text":"tab4"
          },
          {
            "id":5,
            "type":"E",
            "text":"tab5"
          },
        ]
      },
    })
    this.fetchTabData(0);
  },
  fetchData:function(t){  //生成数据
    const newquestions = [];
    for (let i = 0; i < 20; i++) {
      newquestions.push({
        "id":i+1,
        "type": t,
        "text":"服务名称适用品类服务实施详情服务期限服务生效时间摔碰管修一年笔记本本服务有效期内,如客户的数码摄照产品在正常使用过程中由于不慎将产品坠落、挤压、碰撞,而产生的硬件故障,本服务将免费提供硬件维修或更换,使产品重新恢复正常运行。12个月购机满30天后开始生效摔碰管修两年笔记本、数码相机、摄像机、手机、小数码"
      })
    }
    return newquestions
  },
  fetchTabData:function(i){
    console.log(Number(i));
    switch(Number(i)) {
      case 0:
        this.setData({
          testdata1: this.fetchData('A')
        })
        break;
      case 1:
        this.setData({
          testdata2: this.fetchData('B')
        })
        break;
      case 2:
        this.setData({
          testdata3: this.fetchData('C')
        })
        break;
      case 3:
        this.setData({
          testdata4: this.fetchData('D')
        })
        break;
      case 4:
        this.setData({
          testdata5: this.fetchData('E')
        })
        break;
      default:
        return;
    }
  },
  setTab:function(e){ //设置选项卡选中索引
    const edata = e.currentTarget.dataset;
    this.setData({
      showtab: Number(edata.tabindex),
      showtabtype: edata.type
    })
    this.fetchTabData(edata.tabindex);
  },
  scrollTouchstart:function(e){
    let px = e.touches[0].pageX;
    this.setData({
      startx: px
    })
  },
  scrollTouchmove:function(e){
    let px = e.touches[0].pageX;
    let d = this.data;
    this.setData({
      endx: px,
    })
    if(px-d.startx<d.critical && px-d.startx>-d.critical){
      this.setData({
        marginleft: px - d.startx
      })
    }
  },
  scrollTouchend:function(e){
    let d = this.data;
    if(d.endx-d.startx >d.critical && d.showtab>0){
      this.setData({
        showtab: d.showtab-1,
      })
      // this.fetchTabData(d.showtab-1);
    }else if(d.endx-d.startx <-d.critical && d.showtab<this.data.tabnav.tabnum-1){
      this.setData({
        showtab: d.showtab+1,
      })
    }
    this.fetchTabData(d.showtab);
    this.setData({
        startx:0,
        endx:0,
        marginleft:0
    })
  },
})


完整代码下载:http://pan.baidu.com/s/1i5d4nn3

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

0

主题

10

帖子

246

积分

中级会员

Rank: 3Rank: 3

积分
246
发表于 2017-10-12 15:07:46 | 显示全部楼层
不错的。谢谢喽












重庆代孕
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|葫芦娃微信小程序资源网 ( ICP证:鲁ICP备14008133号-3 

GMT+8, 2019-5-19 19:18 , Processed in 0.021956 second(s), 27 queries .

Powered by Discuz!ģ X3.2

© 2001-2013

返回顶部