小程序开发顶部TAB栏和侧边分类点击

先上一个效果图：



根据这个效果图我来说内容。

首先是顶部tab栏

效果实现依靠的是一个组件scroll-view。这个组件很有意思，可以多层嵌套，当然它的属性也很多。

这里主要用的是scroll-x，scroll-x的默认值是false，我们要设置为true。这一步我们仅仅是实现了可以左右滑动。

更重要的是如何判断滑动到了哪个位置，怎么获取对应内容。滑动距离由于我们是左右滑动所以这里是scroll-left，给scroll-left动态赋值。

这里我先上代码

<scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
   <view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">请假</view>
   <view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">离职</view>
   <view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">部门</view>
   <view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">员工</view>
   <view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">事项</view>
   <view class="tab-item {{currentTab==5?'active':''}}" data-current="5" bindtap="swichNav">消息</view>
   <view class="tab-item {{currentTab==6?'active':''}}" data-current="6" bindtap="swichNav">设置</view>
 </scroll-view>

样式上我们用 {{currentTab==6?‘active’:’’}}，这是一个三目运算，做逻辑判断的。相应的就要给current设置对应的序号，就是data-current的内容。除了滑动事件外，我们还需要加一个点击事件bindtap=“swichNav”。因为你不可能只用滑动显示的吧。

好了接下来看看JS中如何配置

这是在公共data{}存贮的内容，供给页面和函数来调用

interval: 5000,
duration: 500,
currentTab: 0, //预设当前项的值
scrollLeft: 0, //tab标题的滚动条位置

函数中这样来写，如果我们只有一屏的宽度内容滚动， this.checkCor();就用不到了。但是如果像示例图那样很多，我们还要判断超出一屏的宽度后要左移多少距离来显示后面的tab项，也就是scrollLeft给一个宽度值。

// 滚动切换标签样式
  switchTab: function(e) {
    this.setData({
      currentTab: e.detail.current
    });
    this.checkCor();
  },
  // 点击标题切换当前页时改变样式
  swichNav: function(e) {
    var cur = e.target.dataset.current; //查询标题序号
    if (this.data.currentTaB == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur
      })
    }
  },
  //判断当前滚动超过一屏时，设置tab标题滚动条。
  checkCor: function() {
    if (this.data.currentTab > 4) {
      this.setData({
        scrollLeft: 300
      })
    } else {
      this.setData({
        scrollLeft: 0
      })
    }
  },

这样简单的顶部tab滑动效果就出来了。附上样式：

/*顶部切换*/

.tab-h {
  height: 80rpx;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 80rpx;
  background: #f7f7f7;
  font-size: 16px;
  white-space: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}

.tab-item {
  margin: 0 36rpx;
  display: inline-block;
}

.tab-item.active {
  color: #4675f9;
  position: relative;
}

.tab-item.active:after {
  content: "";
  display: block;
  height: 8rpx;
  width: 54rpx;
  background: #4675f9;
  position: absolute;
  bottom: 0;
  left: 5rpx;
  border-radius: 16rpx;
}

接着说侧边栏点击

侧边栏效果图

就想购物商城的分类点击一样。这里主要用到的就是官方的框架：数据绑定、列表渲染、条件渲染

具体在代码中是这样用到的：

<!--主盒子-->
      <view class="containers">
        <!--左侧栏-->
        <view class="nav_left">
          <block wx:for="{{cateItems}}" wx:key="">
            <view class="nav_left_items {{curNav == item.cate_id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.cate_id}}">{{item.cate_name}}</view>
          </block>
        </view>
        <!--右侧栏-->
        <view class="nav_right">
          <!--如果有数据，才遍历项-->
          <view wx:if="{{cateItems[curIndex].ishaveChild}}">
            <block wx:for="{{cateItems[curIndex].children}}" wx:key="">
              <view class="nav_right_items">
                <!--界面跳转 -->
                <navigator url="">
                  <image src="{{item.image}}"></image>
                  <text>{{item.name}}</text>
                </navigator>
              </view>
            </block>
          </view>
          <!--如果无数据，则显示数据-->
          <view class="nodata_text" wx:else>该分类暂无数据</view>
        </view>
      </view>

左侧是一个部分，需要用列表渲染 wx:for="{{cateItems}}"，将左侧的各个分类用一个列表展示出来，{{cateItems}}是一个数组。对应分类的点击添加样式我们仍然用三目运算判断{{curNav == item.cate_id ? ‘active’ : ‘’}}"。左侧分类的item我们写在JS中

cateItems: [{
     cate_id: 1,
     cate_name: "公共程序",
     ishaveChild: true,
     children：[{}]
   },
   {
     cate_id: 2,
     cate_name: "公共策划",
     ishaveChild: true,
      children：[{}]
   },
   {
     cate_id: 3,
     cate_name: "郑州项目",
     ishaveChild: true,
      children：[{}]
   },
   {
     cate_id: 4,
     cate_name: "成都项目",
     ishaveChild: true,
      children：[{}]
   },
   {
     cate_id: 5,
     cate_name: "三方客服",
     ishaveChild: true,
      children：[{}]
   }
 ],
 curNav: 1,
 curIndex: 0,

这部分仍然是在公共data中实现，有人会说能否获取服务器内容来填充呢，当然可以实现，这就需要你请求接口，然后存贮data，道理是一样的。

可以看到在分类的item中都给了id值，这也是必须的一步，因为要确保点击对应的分类来实现显示对应的内容，添加对应的样式，所以给上id来排序号。

当然在代码中也要全部列出item的内容。

<view class="nav_left_items {{curNav == item.cate_id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.cate_id}}">{{item.cate_name}}</view>

对应的方法我们要在JS中配置出来：

//部门列表点击
  switchRightTab: function(e) {
    // 获取item项的id，和数组的下标值
    let id = e.target.dataset.id,
      index = parseInt(e.target.dataset.index);
    // 把点击到的某一项，设为当前index
    this.setData({
      curNav: id,
      curIndex: index
    })
  },

有了这个点击函数就可以展示对应的内容了。

还有一步我做简单说明：

 <view wx:if="{{cateItems[curIndex].ishaveChild}}">
            <block wx:for="{{cateItems[curIndex].children}}" wx:key="">

这个列表渲染wx:if="{{cateItems[curIndex].ishaveChild}}，就是判断当前分类是否被点击到，点击到ishaveChild的值是true的就展示对应的内容。wx:for="{{cateItems[curIndex].children}}"，则是请求item的children内容。children也可以用请求服务器内容来实现，同样是把请求到的数据储存到本地，然后给页面渲染出来。

curNav: 1,
 curIndex: 0,

这两个值是初始化内容，就是默认是列表的第一个内容优先展示。

好了本期就说这些，有不懂的可以留言。