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

Biegral 2020/4/25 16:14:10 2200

我们先来看看京东的效果

分析

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

我的实现

代码展示：

js

  1.  /**
  2.  * categoryView.js - 分类页面
  3.  */
  5. var fakeData = require('../../common/fakeData.js')
  7. Page(
  8.   {
  9.   data: {
  10.     categories: ['全部'],
  11.     currentTab: 0,
  12.     scrollLeftValue: 0,
  13.     isPickerShow: false,
  14.     isBgNeed: false,
  15.     commodities: []
  16.   },
  18.   navbarTap: function (e) {
  19.     //将顶部导航栏自动移动到合适的位置
  20.     var idx = e.currentTarget.dataset.idx;
  21.     this.autoScrollTopNav(idx);
  23.     //自动收回
  24.     if (this.data.isPickerShow) {
  25.       this.navbarBtnClick();
  26.     }
  28.     this.setData({
  29.       currentTab: idx
  30.     })
  31.   },
  34.   /**
  35.    * 导航栏右侧箭头按钮点击事件 - 切换模糊背景开闭状态以及展开栏开闭状态
  36.    */
  37.   navbarBtnClick: function(e) {
  38.     this.data.isBgNeed = !this.data.isPickerShow
  39.     this.setData({
  40.         isBgNeed: this.data.isBgNeed
  41.     })
  43.     this.data.isPickerShow = !this.data.isPickerShow
  44.     this.setData({
  45.       isPickerShow: this.data.isPickerShow,
  46.     })
  47.   },
  49.   /**
  50.    * 页面左右滑动事件 - 构造滑动动画，若当前页面无数据，自动加载，需要完善加载函数
  51.    */
  52.   swiperChange: function (e) {
  53.     var idx = e.detail.current;
  54.     this.autoScrollTopNav(idx);
  56.     this.setData({
  57.       currentTab: e.detail.current,
  58.     })
  60.     //若无数据，自动加载
  61.     if (this.data.commodities[idx].length == 0) {
  62.       this.downloadMoreItem();
  63.     }
  64.   },
  66.   /**
  67.    * 上拉刷新
  68.    */
  69.   updateItem: function(e) {
  70.     var idx = this.data.currentTab;
  71.     this.data.commodities[idx] = [];
  72.     this.downloadMoreItem();
  73.   },
  75.   /**
  76.    * 下载更多数据 - 涉及后台拉取数据，需完善
  77.    */
  78.   downloadMoreItem: function(e) {
  79.     var idx = this.data.currentTab;
  80.     var commodities = this.data.commodities;
  82.     //获取更多数据
  83.     commodities[idx] = commodities[idx].concat(
  84.       fakeData.requestForItemsOfType(commodities[idx].length, 10, this.data.categories[idx])
  85.       );
  87.     this.setData({
  88.       commodities: this.data.commodities
  89.     })
  91.     console.log(this.data.commodities);
  92.   },
  94.   /**
  95.    * 用于自动调整顶部类别滑动栏滑动距离，使滑动到用户可接受的合适位置，但自适应上还未考虑太周到
  96.    * @param {number} idx - The index of currentTap.
  97.    */
  98.   autoScrollTopNav: function (idx) {
  99.     if (idx <= 2) {
  100.       this.data.scrollLeftValue = 0;
  101.     } else {
  102.       this.data.scrollLeftValue = (idx - 2) * 60;
  103.     }
  104.     this.setData({
  105.       scrollLeftValue: this.data.scrollLeftValue
  106.     })
  107.   },
  109.   /**
  110.    * 模糊背景点击事件 - 点击模糊背景取消选择
  111.    */
  112.   bgTap: function(e) {
  113.     if (this.data.isPickerShow) {
  114.       this.navbarBtnClick();
  115.     } else {
  116.        return;
  117.     }
  118.   },
  120.   /**
  121.    * 商品点击事件 - 待完善
  122.    */
  123.   itemTap: function(e) {
  124.     console.log("you selsct type " + this.data.currentTab + " item " + e.currentTarget.dataset.idx);
  125.   },
  127.   /**
  128.    * 生命周期函数--监听页面加载，在加载的时候抓取数据
  129.    */
  130.   onLoad: function (options) {
  131.     //首先获取类别项
  132.     this.data.categories = fakeData.requestForCategories();
  133.     this.setData({
  134.       categories: this.data.categories
  135.     })
  136.     //然后默认请求 全部 分类
  137.     for (var i in this.data.categories) {
  138.       this.data.commodities.push([]);
  139.     }
  140.     this.data.commodities[0] = fakeData.requestForItemsOfType(0, 10);
  141.     console.log(this.data.commodities);
  142.     this.setData({
  143.       commodities: this.data.commodities
  144.     })
  145.   }
  146. })

json

  1. {
  2.   "navigationBarTitleText": "商城"
  3. }

wxml

  1. <!--categoryView.wxml-->
  2. <import src="../../common/wxmlTemplate.wxml" />
  4. <!--顶部分类导航条-->  
  5. <view class="">
  6.   <view class="navbar">
  7.     <view class="nav-1">  
  8.         <scroll-view scroll-x="true" class="nav-1-left" scroll-left="{{scrollLeftValue}}" wx:if="{{!isPickerShow}}">
  9.         <view wx:for="{{categories}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" 
  10.           wx:key="unique" bindtap="navbarTap">{{item}}</view>
  11.         </scroll-view>
  12.         <view class="nav-1-left" wx:if="{{isPickerShow}}">
  13.         <view class="item left2Font">{{categories[currentTab]}}</view>
  14.         </view> 
  15.     <!-- <view class="blankblock"></view> -->
  16.         <button class="navbarBtn" bindtap="navbarBtnClick">
  17.         <image src="../../resources/返回.png" class="navbarBtn icon {{isPickerShow ? 'active' : ''}}"></image>
  18.         </button> 
  19.     </view>
  21.     <view class="picker" wx:if="{{isPickerShow}}">
  22.         <view class="spitLine"></view>
  23.         <view class="picker-contain">
  24.         <view wx:for="{{categories}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" 
  25.           wx:key="unique" bindtap="navbarTap">{{item}}</view>
  26.         </view>
  27.     </view>
  28.   </view>
  30.   <swiper class="itemContainer" bindchange="swiperChange" current="{{currentTab}}">
  31.         <block wx:for="{{categories}}" wx:for-item="cItem" wx:key="unique">
  32.             <swiper-item>
  33.                 <scroll-view scroll-y="true" bindscrolltolower="downloadMoreItem" bindscrolltoupper="updateItem">
  34.                 <view class="child" bindtap="itemTap" wx:for="{{commodities[currentTab]}}" 
  35.             data-idx="{{index}}" wx:key="unique" wx:if="{{item.category == cItem || cItem == '全部'}}">
  36.                   <template is="itemInfoTemplate" data="{{item}}"/>
  37.                     </view>
  38.             </scroll-view>
  39.             </swiper-item>
  40.         </block>
  41.   </swiper>
  43.     <!-- 透明遮盖层 -->
  44.   <view class="picker-contain-bg {{isPickerShow? 'show' : ''}}" wx:if="{{isBgNeed}}" bindtap="bgTap"></view>
  46. </view>

wxss

  1. @import "../../common/flexGridStyle.wxss";
  2. @import "../../common/itemShowStyle.wxss";
  4. page {  
  5.   display: flex;  
  6.   flex-direction: column;  
  7.   height: 100%;  
  8. }  
  10. .navbar {
  11.   position: fixed;
  12.   z-index: 2;
  13.   background-color: RGB(247, 247, 247);
  14.   width: 100%
  15. }
  17. .nav-1{  
  18.   flex: none;  
  19.   display: flex;   
  20.   background: #fff;  
  21.   background-color: RGB(247, 247, 247);
  22.   height: 80rpx;
  23. }
  25. .nav-1 .wrapBar {
  26.   display: flex;
  27. }
  29. .nav-1 .item{  
  30.   position: relative;   
  31.   text-align: center;  
  32.   font-size: 30rpx;
  33.   line-height: 80rpx;  
  34.   color: gray;
  35.   display: inline-block;
  36.   padding-left: 20rpx;
  37.   padding-right: 20rpx;
  38. }  
  40. .nav-1 .item.active{  
  41.   color: black;
  42. }  
  44. .nav-1 .item.active:after{  
  45.   content: "";  
  46.   display: block; 
  47.   position: absolute;  
  48.   bottom: 0;  
  49.   left: 0;  
  50.   right: 0; 
  51.   height: 4rpx;  
  52.   background: black;  
  53. }  
  56. button {
  57.   background: transparent;
  58. }
  60. button::after {
  61.   border: 0;
  62. }
  64. .navbarBtn {
  65.   flex: 0 0 15%;
  66. }
  68. .navbarBtn.icon {
  69.   transform: rotate(90deg);
  70.   width: 20rpx;
  71.   height: 40rpx;
  72. }
  74. .navbarBtn.icon.active{
  75.   transform: rotate(-90deg);
  76. }
  78. .blankblock {
  79.   flex: 0 0 10%;
  80. }
  82. .nav-1-left {
  83.   white-space: nowrap;
  84.   overflow: hidden;
  85.   flex: 0 0 85%;
  86. }
  88. .picker {
  89. }
  91. .item.left2Font {
  92.   color: black;
  93. }
  95. .spitLine {
  96.   margin: 0;
  97.   height: 2rpx;
  98.   background-color: gray;
  99. }
  102. .picker-contain {
  103.   display: flex;
  104.   flex-wrap: wrap;
  105.   justify-content: center;
  106. }
  108. .picker-contain-bg {
  109.   position: fixed;
  110.   background-color: black;
  111.   transition: all 1s;
  112.   width: 100%;
  113.   height: 100%;
  114.   z-index: 1;
  115.   top: 0;
  116.   opacity: 0
  117. }
  119. .picker-contain-bg.show {
  120.   opacity: 0.5;
  121. }
  123. .picker-contain .item {
  124.   background-color: RGB(215, 215, 215);
  125.   border-radius:20px;
  126.   margin: 20rpx;
  127.   padding: 50rpx;
  128.   padding-top: 10rpx;
  129.   padding-bottom: 10rpx;
  130.   font-size: 30rpx;
  131.   color: RGB(161, 161, 161);
  132. }
  134. .picker-contain .item.active{  
  135.   color: black;
  136.   background-color: RGB(153, 153, 153);
  137. } 
  139. swiper-item scroll-view {
  140.   display: inline;
  141. }
  143. swiper.itemContainer{
  144.   margin-top: 80rpx;
  145.   height: 1136rpx;
  146. }
本文转载:CSDN博客

阅读排行

分类

归档