折翼天使资源社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 37|回复: 0

[文档教程] 微信小程序实现可滑动的tabview

[复制链接]

7084

主题

7469

帖子

285

积分

网站编辑

Rank: 8Rank: 8

天使之心
0
注册时间
2013-8-22
发表于 2018-11-23 11:22:32 | 显示全部楼层 |阅读模式
微信小程序可滑动的tab-view

  • 基于swiper, scroll和 view实现
  • 在android ios 平台测试过,确保真实环境一致小程序目前不支持组件化;如果有人需要,我在抽离出公共的东西

181812jcxbie6lciy6c5xl.gif

181812jcxbie6lciy6c5xl.gif

主要代码:

js:
  1. Page({
  2. data: {
  3. window_width: 375,// 单位是px
  4. tab_config: {
  5. tabs: ['tab0', 'tab1', 'tab2', 'tab3', 'tab4', 'tab5', 'tab6', 'tab7'],// tabs
  6. fixed: false, // tabbar是否固定宽度
  7. active_tab: 0, //当前激活的tab
  8. item_width: 90,// 单位是px
  9. tab_left: 0, // 如果tabbar不是固定宽度,则目前左移的位置
  10. underline: {
  11. offset: 0 //下划线的位移
  12. }
  13. },
  14. swipe_config: {
  15. swipes: ['demo-text-1', 'demo-text-2', 'demo-text-3', 'demo-text-1', 'demo-text-2', 'demo-text-3', 'demo-text-1', 'demo-text-2'],// 不同面板的内容
  16. indicator_dots: false, // 不显示小圆点
  17. autoplay: false,// 自动切换
  18. interval: 2000,// 自动切换频率
  19. duration: 500, // 切换时间
  20. current: 0 // 当前激活的panel
  21. }
  22. },
  23. onLoad: function (options) {
  24. // 页面初始化 options为页面跳转所带来的参数
  25. let that = this;
  26. try {
  27. let {window_width, tab_config} = that.data;
  28. var res = wx.getSystemInfoSync()
  29. window_width = res.windowWidth;
  30. if (tab_config.fixed) {
  31. tab_config.item_width = window_width / tab_config.tabs.length;
  32. }
  33. that.setData({ "window_width": window_width, "tab_config": tab_config });
  34. } catch (e) {
  35. }
  36. },
  37. // 更换页面到指定page ,从0开始
  38. updateSelectedPage(page) {
  39. let that = this;
  40. // console.log("====_updateSelectedPage");
  41. let {window_width, tab_config, swipe_config } = this.data;
  42. let underline_offset = tab_config.item_width * page;
  43. tab_config.active_tab = page;
  44. swipe_config.current = page;
  45. tab_config.underline.offset = underline_offset;
  46. if (!tab_config.fixed) {
  47. // 如果tab不是固定的 就要 检测tab是否被遮挡
  48. let show_item_num = Math.floor(window_width / tab_config.item_width); // 一个界面完整显示的tab item个数
  49. let min_left_item = tab_config.item_width * (page - show_item_num + 1); // 最小scroll-left
  50. let max_left_item = tab_config.item_width * page; // 最大scroll-left
  51. if (tab_config.tab_left < min_left_item || tab_config.tab_left > max_left_item) {
  52. // 如果被遮挡,则要移到当前元素居中位置
  53. tab_config.tab_left = max_left_item - (window_width - tab_config.item_width) / 2;
  54. }
  55. }
  56. that.setData({
  57. "tab_config": tab_config,
  58. "swipe_config": swipe_config
  59. });
  60. },
  61. handlerTabTap(e) {
  62. let that = this;
  63. that.updateSelectedPage(e.currentTarget.dataset.index);
  64. },
  65. swiperChange(e) {
  66. let that = this;
  67. // console.log("===== swiperChange " + e.detail.current);
  68. that.updateSelectedPage(e.detail.current);
  69. },
  70. onScroll(e) {
  71. let that = this;
  72. }
  73. })
复制代码
复制代码
wxml:
  1. {{item}}
  2. {{item}}
复制代码
复制代码
原文:微信小程序可滑动的tab-view

项目源码:
swipeTab-master.zip(9.63 KB, 下载次数: 32)