WX小程序TAB栏切换 / 小程序商品分类

微信小程序实现tab栏切换功能

实现商城分类功能

1.实现上图, 分类切换功能 

2. 思路: 通过点击tab栏, 来显示和隐藏对应的内容部分

3.注意事项: 调取数据时, 需要和后台沟通清楚, 接口结构

1. view层

<view class="container">
      <view class="tab">
        <view class="{{selected?'red':'default'}}" bindtap="selected">烟花</view>
        <view class="{{selected1?'red':'default'}}" bindtap="selected1">鞭炮</view>
        <view class="{{selected2?'red':'default'}}" bindtap="selected2">小产品</view>
      </view>
      <view class="{{selected?'show':'hidden'}}">
        <view class="tab_l">
          <block wx:for="{{cateItems}}">
            <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="tab_r">
          <block wx:for="{{cateItems[curIndex].children}}">
            <view class="nav_right_items">
              <!--界面跳转 -->
              <navigator url="../../detail/detail}}">
                <image src="{{item.image}}"></image>
                <text>{{ item.name }}</text>
              </navigator>
            </view>
          </block>
        </view>
      </view>
      <view class="{{selected1?'show':'hidden'}}"> 222 </view>
      <view class="{{selected2?'show':'hidden'}}"> 333 </view>
    </view>

2.逻辑层

Page({
        /**
         * 页面的初始数据
         */
        data: {
          selected: true,
          selected1: false,
          selected2: false,
          //模拟数据
          cateItems: [
            {
              cate_id: 1,
              cate_name: '全部',
              ishaveChild: true,
              children: [
                {
                  child_id: 1,
                  name: '鞭炮',
                  image: 'http://huapao.zikaozhuxue.net/images/201801/thumb_img/721_thumb_G_1516693169381.jpg',
                },
                {
                  child_id: 2,
                  name: '噼里',
                  image: 'http://huapao.zikaozhuxue.net/images/201801/thumb_img/721_thumb_G_1516693169381.jpg',
                },
                {
                  child_id: 3,
                  name: '啪啦',
                  image: 'http://huapao.zikaozhuxue.net/images/201801/thumb_img/721_thumb_G_1516693169381.jpg',
                },
              ],
            },
            {
              cate_id: 2,
              cate_name: '日景',
              ishaveChild: true,
              children: [
                {
                  child_id: 1,
                  name: '鞭炮',
                  image: 'http://huapao.zikaozhuxue.net/images/201801/thumb_img/721_thumb_G_1516693169381.jpg',
                },
                {
                  child_id: 2,
                  name: '噼里',
                  image: 'http://huapao.zikaozhuxue.net/images/201801/thumb_img/721_thumb_G_1516693169381.jpg',
                },
              ],
            },
            {
              cate_id: 3,
              cate_name: '夜景',
              ishaveChild: true,
              children: [
                {
                  child_id: 1,
                  name: '鞭炮',
                  image: 'http://huapao.zikaozhuxue.net/images/201801/thumb_img/721_thumb_G_1516693169381.jpg',
                },
                {
                  child_id: 2,
                  name: '噼里',
                  image: 'http://huapao.zikaozhuxue.net/images/201801/thumb_img/721_thumb_G_1516693169381.jpg',
                },
                {
                  child_id: 3,
                  name: '啪啦',
                  image: 'http://huapao.zikaozhuxue.net/images/201801/thumb_img/721_thumb_G_1516693169381.jpg',
                },
              ],
            },
          ],
          curNav: 1,
          curIndex: 0,
        },

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

        selected: function (e) {
          this.setData({
            selected1: false,
            selected2: false,
            selected: true,
          })
        },
        selected1: function (e) {
          this.setData({
            selected: false,
            selected1: true,
            selected2: false,
          })
        },
        selected2: function (e) {
          this.setData({
            selected: false,
            selected1: false,
            selected2: true,
          })
        },

        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {},

        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function () {},

        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function () {},

        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function () {},

        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function () {},

        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function () {},

        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function () {},

        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function () {},
      },)

3.wxss

.tab {
  border-bottom: 1px solid #f3f3f3;
  overflow: hidden;
}
.tab > view {
  width: 33.33%;
  text-align: center;
  float: left;
  height: 44px;
  line-height: 44px;
  font-size: 14px;
}
.default {
  color: #000;
}
.red {
  color: #ea3e39;
  border-bottom: 1px solid #ea3e39;
}
.show {
  display: block;
  text-align: center;
  height: 100%;
}
.hidden {
  display: none;
  text-align: center;
  height: 100%;
}

.tab_l {
  width: 25%;
  float: left;
  font-size: 14px;
  border-right: 1px solid #f3f3f3;
  height: 100%;
  box-sizing: border-box;
}
.tab_r {
  width: 75%;
  float: left;
  font-size: 14px;
}
.tab_l view {
  line-height: 46px;
  border-bottom: 1px solid #f3f3f3;
}
.nav_left_items {
  height: 40px;
  line-height: 40px;
  padding: 6px 0;
  border-bottom: 1px solid #dedede;
  font-size: 14px;
}
.nav_left_items.active {
  background: #f5f5f5;
  color: #ec6d69;
  border-bottom: none;
}

.nav_right_items {
  /*浮动向左*/
  float: left;
  /*每个item设置宽度是33.33%*/
  width: 50%;
  height: auto;
  text-align: center;
}
.nav_right_items image {
  width: 90%;
  height: 120px;
  margin-top: 8px;
}
.nav_right_items text {
  /*给text设成块级元素*/
  display: block;
  margin-top: 15px;
  font-size: 14px;
  color: black;
  /*设置文字溢出部分为...*/
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}