首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >实战教程 | 小程序自定义TabBar 如何实现“keep-alive”

实战教程 | 小程序自定义TabBar 如何实现“keep-alive”

作者头像
极乐君
发布于 2021-07-05 07:11:00
发布于 2021-07-05 07:11:00
1.2K0
举报
文章被收录于专栏:极乐技术社区极乐技术社区

自定义TabBar方案

我们可以新建一个home文件夹,在home/index.wxml中写一个tabBar,然后把TabBar页面写成组件,然后点击TabBar切换相应的组件展示就可以。代码如下:

wxml部分

<!-- home页面 -->

<view id='index'>

<!-- 自定义头部 -->

<head name='{{name}}' bgshow="{{bgshow}}" backShow='false'></head>

<!-- 首页 -->

<index change='{{activeIndex==0}}'></index>

<!-- 购物车 -->

<cart change='{{activeIndex==1}}'></cart>

<!-- 订单 -->

<order change='{{activeIndex==2}}'></order>

<!-- 我的 -->

<my change='{{activeIndex==2}}'></my>

<!-- tabbar -->

<view class="tab ios">

<view class="items {{activeIndex==index?'active':''}}" wx:for="{{tab}}" bindtap="choose" data-index='{{index}}' wx:key='index' wx:for-item="items">

<image wx:if="{{activeIndex==index}}" src="{{items.activeImage}}"></image>

<image wx:else src="{{items.image}}"></image>

<text>{{items.name}}</text>

</view>

</view>

</view>

home页面的ts

Page({

data: {

activeIndex:0,

tab:[

{

name:'商品',

image:'../../images/index.png',

activeImage:'../../images/index-hover.png',

},

{

name:'购物车',

image:'../../images/cart.png',

activeImage:'../../images/cart-hover.png',

},

{

name:'订单',

image:'../../images/order.png',

activeImage:'../../images/order-hover.png',

},

{

name:'我的',

image:'../../images/my.png',

activeImage:'../../images/my-hover.png',

}

]

},

// 切换事件

choose(e:any){

const _this=this;

const {activeIndex}=_this.data;

if(e.currentTarget.dataset.index==activeIndex){

return

}else{

_this.setData({

activeIndex:e.currentTarget.dataset.index

})

}

},

})

上面代码不难理解,点击以后改变activeIndex从而控制每个组件的渲染和销毁,这样付出的代价还是比较大的,需要我们进一步的优化。

如何实现keep-alive

我们知道,这里主要是避免组件反复创建和渲染,有效提升系统性能。

实现思路

  1. 在tab每个选项增加两个值:status和show,show控制组件是否需要渲染,status控制组件display
  2. 初始化时候设置首页的status和show,其他都为false
  3. 当我们切换时:把上一个tab页面的status改为false,然后把当前要切换页面的tab数据中的status和show都改为true,最后再更新一下activeIndex的值。

wxml代码:

<!-- 首页 -->

<view wx:if="{{tab[0].show}}" hidden="{{!tab[0].status}}">

<index></index>

</view>

<!-- 购物车 -->

<view wx:if="{{tab[1].show}}" hidden="{{!tab[1].status}}">

<cart></cart>

</view>

<!-- 订单 -->

<view wx:if="{{tab[2].show}}" hidden="{{!tab[2].status}}">

<order></order>

</view>

<!-- 我的 -->

<view wx:if="{{tab[3].show}}" hidden="{{!tab[3].status}}">

<my></my>

</view>

ts代码

Page({

data: {

activeIndex:0, //当前选中的index

tab:[

{

name:'商品',

image:'../../images/index.png',

activeImage:'../../images/index-hover.png',

status:true,//控制组件的display

show:true, //控制组件是否被渲染

},

{

name:'购物车',

image:'../../images/cart.png',

activeImage:'../../images/cart-hover.png',

status:false,

show:false,

},

{

name:'订单',

image:'../../images/order.png',

activeImage:'../../images/order-hover.png',

status:false,

show:false,

},

{

name:'我的',

image:'../../images/my.png',

activeImage:'../../images/my-hover.png',

status:false,

show:false,

}

]

},

choose(e:any){

const _this=this;

const {activeIndex}=_this.data;

//如果点击的选项是当前选中,就不执行

if(e.currentTarget.dataset.index==activeIndex){

return

}else{

//修改上一个tab页面的status

let prev='tab['+activeIndex+'].status',

//修改当前选中元素的status

status='tab['+e.currentTarget.dataset.index+'].status',

//修改当前选中元素的show

show='tab['+e.currentTarget.dataset.index+'].show';

_this.setData({

[prev]:false,

[status]:true,

[show]:true,

activeIndex:e.currentTarget.dataset.index,//更新activeIndex

})

}

},

})

这样基本就大功告成了,来看一下效果:

当我们点击切换时候,如果当前组件没有渲染就会进行渲染,如果渲染过后进行切换只是改变display,完美实现了需求,大功告成!

实际业务场景分析

在实际使用中还有两种种情况:

  • 情况1:比如某些数据并不希望他首次加载后就数据保持不变,当切换页面时候希望数据进行更新,比如笔者做的电商小程序,在首页点击商品加入购物车,然后切换到购物车,每次切换时候肯定需要再次进行请求。
  • 情况2:像个人中心这种页面,数据基本请求一次就可以,没必要每次切换请求数据,这种我们不需要进行改进。

我们给组件传递一个值:status,然后在组件中监听这个值的变化,当值为true时候,去请求接口更新数据。具体代码如下:

wxml代码(只列举关键部分):

<!-- 首页 -->

<view wx:if="{{tab[0].show}}" hidden="{{!tab[0].status}}">

<index change='{{tab[0].status}}'></index>

</view>

<!-- 购物车 -->

<view wx:if="{{tab[1].show}}" hidden="{{!tab[1].status}}">

<cart change='{{tab[0].status}}'></cart>

</view>

首页组件/购物车组件ts代码:

Component({

/**

* 组件的属性列表

*/

properties: {

change: {

type: String,//类型

value: ''//默认值

},

},

observers: {

//监听数据改变进行某种操作

'change': function(change) {

if(change=='true'){

console.log('更新首页数据'+change)

}

}

},

})

效果预览

极乐技术社区

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-06-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 极乐技术社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
小程序自定义tabbar的两种方式
在根目录下创建custom-tab-bar目录,然后在该目录下新建组件component,注意是组件,不要建成page页面,虽然都一样是js/json/wxml/wxss四个文件
全栈程序员站长
2022/11/17
1.1K0
小程序自定义tabbar的两种方式
实战丨云开发商城小程序(附源码)
* 本文包含较多代码片段,PC端浏览推荐前往:https://cloud.tencent.com/document/product/876/70253
腾讯云开发TCB
2022/03/10
6.9K0
实战丨云开发商城小程序(附源码)
☀️苏州程序大白一文教你学会微信小程序开发☀️《❤️记得收藏❤️》
3、与data同级 并且可以将input中输入的值与data中定义的属性绑定,使用this.setData({属性:e.detail.value})。
苏州程序大白
2021/09/29
9880
微信小程序自定义tab,多层tab嵌套实现
小程序最近是越来越火了…… 做小程序有一段时间了,总结一下项目中遇到的问题及解决办法吧。
solocoder
2022/04/06
8680
微信小程序自定义tab,多层tab嵌套实现
微信小程序之购物车功能
IMWeb前端团队
2018/01/08
4K0
微信小程序之购物车功能
微信小程序电商实战—首页篇(上)
在index.wxml我们使用bindtap进行点击事件监听,设置事件名称为navbarTap并且在index.js里设置这个事件对应的逻辑处理。我们在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item,想要了解wx:for可以参考该资料:https://www.w3cschool.cn/weixinapp/weixinapp-list.html
游离于山间之上的Java爱好者
2022/09/21
1.2K0
微信小程序电商实战—首页篇(上)
小程序项目开发实战:打造一款微信点餐小程序
随着微信小程序的流行,越来越多的开发者开始涉足小程序开发。本篇文章将带领读者通过一个实际的案例,一步步开发一款微信点餐小程序。我们将从项目的准备工作开始,逐步介绍小程序开发的各个方面,包括页面设计与布局、数据绑定与交互逻辑、页面跳转与路由、数据请求与展示、用户授权与登录、性能优化与调试技巧,以及最后的小程序上线与发布。
海拥
2023/07/05
4K0
微信小程序(四)绝对不可错过切换自定义菜单栏的骚操作
在开发小程序的时候,一般的小程序用官方自带的菜单栏就够了,但一但稍微复杂的小程序可能因为产品经理的一句“页面太多了得加个菜单”,就可能要对菜单栏进行增、删、改的操作,这个时候自带的就满足不了需求了,可以使用官方提供的自定义菜单栏。 但官方提供的自定义菜单栏有个特点,就是菜单栏的页面必须是 Component ,假如你是在项目做到一半的时候有要对菜单栏进行增、删、改的需求,用官方提供自定义菜单栏就需要把page页面改成 Component,那就需要很多时间修改页面逻辑,会很麻烦。 所以这个时候,我们就可以采用官方自带的菜单栏和自己封装的菜单栏组合使用,这样能节省修改逻辑的时间,还能享受自带菜单的良好交互。
andyhu
2022/12/14
1.2K0
微信小程序(四)绝对不可错过切换自定义菜单栏的骚操作
使用原生开发高仿瑞幸小程序(一):使用 Vant 组件库和配置多页面
为什么要跨平台,自然是为了节约成本。尤其是创业初期,需要快速迭代,快速试错。此时用原生技术,开发起来未免太过拖沓。我所想的是,如何能够快速的,最大化的覆盖屏幕数。首先,我们按照old school来分,我们可以分为移动端,web端和pc端。移动端的跨平台技术可以采用目前大热的flutter,这是由google推出的技术。而web端和pc端在Electron出现后,也变得简单了。我们可以用js来写pc端的应用。这就意味着,我们只需要两门技术就能覆盖所有端。
一只图雀
2020/05/21
2.3K1
微信小程序|自定义折叠面板
在小程序页面中,一个可点开、关闭的折叠面板,并且能在点开面板中任意添加不同的内容,需要了解到不同组件的用法、事件绑定的方法以及条件渲染的方法。
算法与编程之美
2020/07/02
3.8K0
【愚公系列】2022年11月 微信小程序-Vant实现自定义tabBar
小程序自定义tabBar官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
愚公搬代码
2022/11/18
1.3K0
【愚公系列】2022年11月 微信小程序-Vant实现自定义tabBar
小程序开发项目实战:外卖点餐系统
随着外卖行业的快速发展,越来越多的餐饮商家和消费者选择通过线上平台来完成点餐和配送。微信小程序作为一种轻量级、易于接入的应用形态,成为了外卖点餐系统的理想平台。本文将通过实战案例,带领你从零开始开发一个简单的外卖点餐系统,涵盖项目架构设计、核心功能实现和关键技术等方面。
LucianaiB
2025/01/28
4280
微信小程序——代码片段汇集
作者:beatzcs 链接:https://www.jianshu.com/p/c681007a6287
思索
2024/08/16
2000
打造新闻阅读微信小程序:从列表展示到实用功能一应俱全
微信小程序作为一个轻量级的应用平台,为用户提供了便捷的信息获取和服务体验。本文将以一个新闻阅读类的微信小程序为例,详细介绍如何实现新闻列表展示、图片加载、Tab滑动切换、获取数据、处理图片加载失败、数据缓存、分页加载、错误处理、下拉刷新、列表项点击跳转、用户授权、搜索功能、图片预览和小程序分享等功能。跟随本文的步骤,你将轻松掌握微信小程序的开发技巧,为用户打造一款实用且美观的新闻阅读应用。
陆业聪
2024/07/23
4790
打造新闻阅读微信小程序:从列表展示到实用功能一应俱全
值得一看的小程序 TabBar 创意动画
Hi 头像最近进行了 v2 版大改版,其中的交互动画得到了不少好友的称赞。今天我就来分享一些关于小程序 TabBar 创意动画,将从 TabBar 类型、完整的 TabBar 创意动画进行分析。
一只图雀
2020/11/03
4.7K0
值得一看的小程序 TabBar 创意动画
开发|走进小程序(三)
前一篇博客为大家简单的讲解了一下关于一个简单的电商小程序的首页和分类页面的制作。这篇博客呢,继续为大家讲解后面搜索页、详情页、购物车页面的制作。
算法与编程之美
2019/07/17
9120
微信小程序实用代码段(持续更新中)
两年前的文章,被收藏了368次。挺实用的,可以看看。排名不分先后,按自己的习惯来的。总结经验,不喜勿喷哦~
Vam的金豆之路
2021/12/01
1.1K0
微信小程序实用代码段(持续更新中)
微信小程序——轮播图、组件传值、下拉刷新、导航 实战开发
滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。 属性表如下
wsuo
2020/09/22
1.7K0
【腾讯游戏人生】微信小程序开发总结
目前【腾讯游戏人生】小程序已经发布上线,大家可以扫小程序码进行体验。接下来主要介绍在开发该款小程序过程中的一些思考和积累。
一时两无
2018/06/08
3.3K3
小程序商城订单支付界面(小程序)
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/142898.html原文链接:https://javaforall.cn
全栈程序员站长
2022/08/25
3.9K0
推荐阅读
相关推荐
小程序自定义tabbar的两种方式
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档