小程序最近是越来越火了…… 做小程序有一段时间了,总结一下项目中遇到的问题及解决办法吧。 项目中有个多 tab 嵌套的需求,进入程序主界面下面有两个 tab,进入A模块后,A模块最底下又有多个tab,每个tab上又嵌了2-4个不等的tab。。。 这种变态需求只能自定义tab了。 其实如果项目不是很复杂,没有多tab嵌套的需求,完全可以用小程序官方的 tabBar,方便快捷。 官方 tabBar 地址:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html 一、Demo结构先看效果图吧 结构是这样的:程序主界面包含两个 tab:主页和我的,主页又包含两个tab:最热和最新;我的也包含两个tab:电影和音乐。 关系图如下: 项目 主页 最热 最新 我的 电影 音乐 二、开始撸代码再看代码结构 两种页面结构小程序的页面分为两种:
相同点: 都由四个文件: 不同点:
{
"component": true,
"usingComponents": {
"movie": "movie/movie",
"music": "music/music"
}
}
page 的 js 代码
Page({
/** * 页面的初始数据 */
data: {
},
/** * 生命周期函数--监听页面加载 */
onLoad: function (options) {
},
/** * 生命周期函数--监听页面初次渲染完成 */
onReady: function () {
},
/** * 生命周期函数--监听页面显示 */
onShow: function () {
},
/** * 生命周期函数--监听页面隐藏 */
onHide: function () {
},
/** * 生命周期函数--监听页面卸载 */
onUnload: function () {
},
/** * 页面相关事件处理函数--监听用户下拉动作 */
onPullDownRefresh: function () {
},
/** * 页面上拉触底事件的处理函数 */
onReachBottom: function () {
},
/** * 用户点击右上角分享 */
onShareAppMessage: function () {
}
})
component 的 js 代码 Component({
/** * 组件的属性列表 */
properties: {
},
/** * 组件的初始数据 */
data: {
},
/** * 组件的方法列表 */
methods: {
}
})
本例中每个 tab 都是一个小程序中定义的 代码解析先看 要引入自定义组件需要在
{
"usingComponents":{
"home": "./home/home",
"mine": "./mine/mine"
}
}
现在,就可以在 <view class='container'> <view class='content'> <view wx:if='{{currentTab == 0}}'> <home/> </view> <view wx:if='{{currentTab == 1}}'> <mine/> </view> </view> <!-- 下面的两个tab --> <view class='bottom-tab'> <view class='tab-item {{currentTab == 0 ? "active" : ""}}' data-current="0" bindtap='switchTab'> <image src='{{currentTab == 0 ? "../../assets/home_active.png" : "../../assets/home.png"}}' class='item-img'></image> <text class='item-text'>主页</text> </view> <view class='tab-item {{currentTab == 1 ? "active" : ""}}' data-current="1" bindtap='switchTab'> <image src='{{currentTab == 1 ? "../../assets/mine_active.png" : "../../assets/mine.png"}}' class='item-img'></image> <text class='item-text'>我的</text> </view> </view> </view>
tab切换的原理是根据 切换tab的方法: switchTab(e) {
this.setData({ currentTab: e.currentTarget.dataset.current });
}
这里有几个需要注意的点:
再看主页 同样需要在
{
"component": true,
"usingComponents": {
"hot": "hot/hot",
"new": "new/new"
}
}
注意 布局文件
<view class='container'>
<view class='tab-wrapper'> <view id='tableft' class='tab-left {{currentTab === 0 ? "tab-active":""}}' bindtap='switchTab'>最热</view> <view id='tabright' class='tab-right {{currentTab === 1 ? "tab-active" : ""}}' bindtap='switchTab'>最新</view> </view>
<view class='content-wrapper' wx:if='{{currentTab === 0}}'><hot/></view>
<view class='content-wrapper' wx:if='{{currentTab === 1}}'><new/></view>
</view>
js文件
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
currentTab: 0
},
/**
* 组件的方法列表
*/
methods: {
switchTab(e) {
console.log(e)
let tab = e.currentTarget.id
if (tab === 'tableft') {
this.setData({ currentTab: 0 })
} else if (tab === 'tabright') {
this.setData({ currentTab: 1 })
}
}
}
})
给两个 其他几个页面的代码都大同小异,主要是判断当前点击的是哪个 源码地址: https://github.com/cachecats/mini-multi-tab |
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。
- 微信扫描二维码关注官方微信
- ▲长按图片识别二维码