用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序--顶部导航栏 仿京东UI样式

Rolan 2017-9-1 00:32

我们先来看看京东的效果分析上端导航栏可以放置多个分类,可滑动点击导航栏最右端按钮可以查看所有分类,同时背景模糊内容部分右拉跳转到另外的分类点击分类时导航栏的滑动部分自动滑动到合适的位置我的实现代码展示 ...

我们先来看看京东的效果

分析

  1. 上端导航栏可以放置多个分类,可滑动
  2. 点击导航栏最右端按钮可以查看所有分类,同时背景模糊
  3. 内容部分右拉跳转到另外的分类
  4. 点击分类时导航栏的滑动部分自动滑动到合适的位置

我的实现

代码展示:

js

  1. /**
  2. * categoryView.js - 分类页面
  3. */
  4. var fakeData = require('../../common/fakeData.js')
  5. Page(
  6. {
  7. data: {
  8. categories: ['全部'],
  9. currentTab: 0,
  10. scrollLeftValue: 0,
  11. isPickerShow: false,
  12. isBgNeed: false,
  13. commodities: []
  14. },
  15. navbarTap: function (e) {
  16. //将顶部导航栏自动移动到合适的位置
  17. var idx = e.currentTarget.dataset.idx;
  18. this.autoScrollTopNav(idx);
  19. //自动收回
  20. if (this.data.isPickerShow) {
  21. this.navbarBtnClick();
  22. }
  23. this.setData({
  24. currentTab: idx
  25. })
  26. },
  27. /**
  28. * 导航栏右侧箭头按钮点击事件 - 切换模糊背景开闭状态以及展开栏开闭状态
  29. */
  30. navbarBtnClick: function(e) {
  31. this.data.isBgNeed = !this.data.isPickerShow
  32. this.setData({
  33. isBgNeed: this.data.isBgNeed
  34. })
  35. this.data.isPickerShow = !this.data.isPickerShow
  36. this.setData({
  37. isPickerShow: this.data.isPickerShow,
  38. })
  39. },
  40. /**
  41. * 页面左右滑动事件 - 构造滑动动画,若当前页面无数据,自动加载,需要完善加载函数
  42. */
  43. swiperChange: function (e) {
  44. var idx = e.detail.current;
  45. this.autoScrollTopNav(idx);
  46. this.setData({
  47. currentTab: e.detail.current,
  48. })
  49. //若无数据,自动加载
  50. if (this.data.commodities[idx].length == 0) {
  51. this.downloadMoreItem();
  52. }
  53. },
  54. /**
  55. * 上拉刷新
  56. */
  57. updateItem: function(e) {
  58. var idx = this.data.currentTab;
  59. this.data.commodities[idx] = [];
  60. this.downloadMoreItem();
  61. },
  62. /**
  63. * 下载更多数据 - 涉及后台拉取数据,需完善
  64. */
  65. downloadMoreItem: function(e) {
  66. var idx = this.data.currentTab;
  67. var commodities = this.data.commodities;
  68. //获取更多数据
  69. commodities[idx] = commodities[idx].concat(
  70. fakeData.requestForItemsOfType(commodities[idx].length, 10, this.data.categories[idx])
  71. );
  72. this.setData({
  73. commodities: this.data.commodities
  74. })
  75. console.log(this.data.commodities);
  76. },
  77. /**
  78. * 用于自动调整顶部类别滑动栏滑动距离,使滑动到用户可接受的合适位置,但自适应上还未考虑太周到
  79. * @param {number} idx - The index of currentTap.
  80. */
  81. autoScrollTopNav: function (idx) {
  82. if (idx <= 2) {
  83. this.data.
鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

分享至 : QQ空间
收藏
原作者: 菇生 来自: csdn

相关阅读