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;
}