微信小程序 选项卡 窗口顶部TabBar页面切换二：数据在js中定义

一、wxml代码

<!-- 上方tabBar 开始 --> < view class= "swiper-tab"> < block wx:for= "{{cateItems}}" wx:key= "id"> < view class= "swiper-tab-list {{currentTab==item.cate_id ? 'on' : ''}}" data-current= "{{item.cate_id}}" bindtap= "swichNav"> {{item.cate_name}} </ view > </ block > </ view > <!-- 上方tabBar 结束 --> <!-- 下方 内容 开始 --> < view wx:if= "{{currentTab==children}}" class= "swiper-box"> < block wx:for= "{{cateItems[children-1].children}}" wx:key= "id"> < view class= "swiper-box_items"> < image src= "{{item.img}}"></ image > < text >{{item.name}} </ text > </ view > </ block > </ view > <!-- 下方 内容 结束 -->

二、wxss代码

/* pages/TabBar/TabBar.wxss */ /* 1. 选项卡 */ .swiper-tab { width: 100%; /* 选项卡所占宽度 */ border-bottom: 2 rpx solid #777; /* 设置选项卡下边框的样式 */ text-align: center; /* 设置选项卡字体的显示 */ line-height: 80 rpx; /* 设置选项卡所占的告诉 */ } /* 1.1. 选项卡中的子选项 */ .swiper-tab-list { font-size: 38 rpx; /* 设置选项卡字体的大小 */ display: inline-block; /* 行内块元素。（CSS2.1 新增的值） */ width: 25%; /* 每个子选项所占的宽度 */ color: #777; /* 字体的颜色 */ } /* 1.2. 子选项被选中时的样式 */ .on { color: #3385ff; /* 选中时字体的颜色 */ border-bottom: 5 rpx solid #3385ff; /* 选中时选项卡下边框的样式 */ } /* 2.选项卡下方的内容 */ .swiper-box{ position: absolute; /* 使用绝对定位 */ top: 10; /* 距离上边距：0px */ left: 40px; /* 距离左边距：80px */ width: 75%; /* 右侧主盒子所占宽度 */ height: 600px; /* 右侧主盒子所占高度 */ padding: 10px; /* 所有 4 个内边距都是 10px*/ box-sizing: border-box; /* 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/ } /* 2.1. 选项卡下方的内容的每个item */ .swiper-box .swiper-box_items{ float: left; /* 浮动向左 */ width: 33.33%; /* 每个item设置宽度是33.33% */ height: 120px; /* 每个item设置高度是120px */ text-align: center; /* 设置图片下方的提示文字居中显示 */ } /* 2.2. 选项卡下方的内容的每个图片样式设置 */ .swiper-box .swiper-box_items image{ width: 60px; /* 给图片设置宽度 */ height: 60px; /* 给图片设置高度 */ margin-top: 15px; /* 图片距离上边距15px */ border-radius: 40%; /* 给图片添加圆角边框 */ }

3、js代码

// pages/TabBar/TabBar.js var app = getApp(); var types = [ { cate_id: 1, cate_name: "水果", children: [{ child_id: 1, name: "猕猴桃", img: "../images/mihoutao.png" }, { child_id: 2, name: "龙眼", img: "../images/longyan.png" }, { child_id: 3, name: "橘子", img: "../images/juzi.png" }, { child_id: 4, name: "火龙果", img: "../images/huolongguo.png" }, { child_id: 5, name: "草莓", img: "../images/caomei.png" }] }, { cate_id: 2, cate_name: "干果", children: [{ type_id: 2, child_id: 1, name: "夏威夷果", img: "../images/xiaweiyi.png" }, { type_id: 2, child_id: 2, name: "开心果", img: "../images/kaixin.png" }, { type_id: 2, child_id: 3, name: "碧根果", img: "../images/bigen.png" }, { type_id: 2, child_id: 4, name: "芒果干", img: "../images/mangguo.png" }] }, { cate_id: 3, cate_name: "蔬菜", children: [{ type_id: 3, child_id: 1, name: "花椰菜", img: "../images/huaye.png" }, { type_id: 3, child_id: 2, name: "生菜", img: "../images/shengcai.png" }, { type_id: 3, child_id: 3, name: "番茄", img: "../images/fanqie.png" }] }, { cate_id: 4, cate_name: "海鲜", children: [] }]; Page({ /* 页面的初始数据 */ data: { cateItems: types, currentTab: 1, // tab切换 children: 1, // 内容切换 }, /* tab 切换事件 */ swichNav: function (e) { var that = this; that.setData({ currentTab: e.target.dataset.current, children: e.target.dataset.current }) } })

四、效果图