【微信小程序实现tab栏切换渲染当前点击的数据】

最新推荐文章于 2024-05-05 20:40:50 发布
原创 最新推荐文章于 2024-05-05 20:40:50 发布 · 782 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#前端 #微信小程序
文章讲述了在开发过程中如何处理tab栏点击事件，通过获取点击的下标值来动态渲染数据。首先，获取当前tab的active值以确定所需数据。然后，利用wx:for指令遍历并显示数据，初次加载默认显示第一个数据。当用户点击内容时，根据点击的值更新渲染内容。这是一个关于前端交互和数据绑定的技术分享。

思路

1. 通过获取当前点击的下标值将获取到的值传给要渲染的数据

2. 当前点击的内容如果与获取到的数据值的相同则渲染该数据

3. 要获取当前点击的下标值，第一次默认渲染第一个数据 

代码实现

1.  获取tab栏当前点击的active值，点击哪个值就获取哪个数据

 

 2.wx:for将数据渲染到页面，tab栏切换用的是组件所用直接调用即可

 3.点击哪个内容就渲染哪个数据，这里就是说bagData数据后边拼接第几个值，用的是当前点击的的值，点击哪个值就把当前点击的值渲染到页面上

4.也是直接wx:for将数据渲染上去就好了

5.一般都是默认第一个显示，所以只需要请求数据里默认传一个[0]即可

 最后

以上只是记录和分享，如有疑问欢迎留言

用 UUID 把多层级 managed RAP BO 设计顺，4 层节点也能让框架自动跑起来
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
04-24 6939
本文探讨了在RAP建模中处理多层级数据结构的设计原则。文章指出，当层级达到第3层及以上时，传统的语义键模型会变得复杂且低效，而采用UUID主键则能简化设计。关键建议包括： 每个表只需一个UUID主键字段，无需构建复杂的复合键 子节点保存父节点UUID，第3层及以上节点额外保存根节点UUID 业务可读编号作为语义键单独保留，与数据库主键解耦 根节点需包含完整的管理字段（创建人、修改时间等） 这种设计使RAP框架能更好地处理深层级节点的锁控制和draft支持，同时保持业务可读性。文章提供了各层级节点的具体表结构
微信小程序之头部tab切换实现
xymxwz的博客
08-28 1893
实现头部tab点击切换效果 一、实际效果 二、代码参考 test.wxml <!-- 头部 --> <view class="tabcontent"> <block wx:for="{{tabs}}" wx:key="*this"> <view id="{{index}}" class="tabcell {{ activeInde...
小程序09-更改小程序渲染模式&新建小程序页面
Eiei47的博客
04-28 2924
新建小程序页面，新建小程序页面的两种方式，小程序文件介绍，更改小程序渲染模式
uniapp 之 tab栏 切换数据渲染不同状态
HQ\(^o^)/的博客
11-27 1959
前面讲解些 tab栏是如何切换的，那下面就给大家演示下它们的状态是怎么切换过来的，很简单上面就是最终的效果图最开始时，后端把全部订单的所有数据，包含一些状态都返给我了，我开始想的，是通过 先过滤数组，找到自己需要的状态对应的数组，然后把那个数组传递给tab栏切换到对应的页面，通俗一点就是，把已完成状态的数组，传递给已完成那个组件，进而渲染已完成的数据，但，最终发现，这样一些的话，要 C全部订单的 样式，写起来有些麻烦，
微信小程点击显示对应的内容
weixin_46504346的博客
06-21 2177
要实现微信小程序点击后显示对应的内容，可以使用wx:if和wx:else指令来控制显示或隐藏对应的内容。
微信小程序点击左边显示左边内容，点击右边显示右边内容
weixin_46504346的博客
06-21 2129
在页面的js文件中，您需要定义showLeft()和showRight()函数来实现按钮的交互。您可以创建两个视图容器组件，一个放在左边，一个放在右边。然后，您可以使用按钮或其他交互元素来触发视图容器组件的显示或隐藏。最后，在css文件中，您可以为左侧视图容器和右侧视图容器定义样式，如宽度、高度、位置等。您还可以为按钮定义样式，以更好地与您的应用程序主题和风格匹配。下面是一个示例代码，其中包括一个左侧视图容器和一个右侧视图容器，以及两个按钮，一个用于显示左侧视图容器，另一个用于显示右侧视图容器。
微信小程序scroll-view配合swiper实现tab栏切换
weixin_42860683的博客
11-07 9148
微信小程序scroll-view配合swiper实现tab栏切换 动态的渲染scroll-view 滑动swiper scroll-view滚动到相对应的地方代码wxmljs代码 **要在小程序里面实现一个tab栏切换的页面 但是tab的数量是动态渲染的 会很多 所有就用了scroll-view超出部分能滑动 下面就用swiper滑动切换 废话不多说 直接贴上代码吧 ** ， ##效果图 ...
微信小程序 - tab选项卡切换的实现方法
铁锤妹妹的博客
08-31 5231
页面效果 大体思路 首先是把新闻的内容，还有活动的内容都列到wxml上 然后把tab写出来。现在的难点是如何把tab和下面的内容联系起来 我们定义一个公共变量，变量名是state，当state= ‘news’ 的时候，显示新闻的内容，当state= ‘conference’ 的时候，显示活动内容 怎么在点击tab切换的时候，改变对应的state的值呢 ？ (1)首先是给新闻和活动加一个date-state属性，属性的值分别代表了新闻和活动 (2)其次需要一个点击方法，当点击新闻的时候，就通过setDat
微信小程序之创建顶部tab菜单栏切换（新手学习）
lyj961222的博客
12-17 7361
关于顶部菜单tab菜单栏切换，可以有两种写法，但是都是用到swiper这个视图插件。插件介绍可以查看微信小程序开放文档。 第一种方式： 效果图 .wxml <view>tap切换 方法一</view> <view class="swiper_tab_view"> <scroll-view scroll-x='true' scroll-le...
微信小程序———同一页面内左右滑动切换内容显示
qq_43852612的博客
08-30 6636
通过微信小程序实现手指触摸屏幕然后页面左右滑动。切换内容
微信小程序开发---条件渲染和列表渲染
gaoqiandr的博客
09-07 1783
【代码】微信小程序开发---条件渲染和列表渲染。
微信小程序初学指南
2301_79369181的博客
05-05 948
注意：1.小程序目前有两种渲染模式：（1）skyline渲染模式：新的，一般不用（2）webview渲染模式：要切换为webview渲染模式：｛在APP.json中去掉renderer、renderOptions、componentFramework还有skyline｝1.三个app开头的为项目的主体文件（app.js、app.json、app.wxss）2.pages：里面存放小程序的页面，现在里面有一个index页面，一个页面是由4个文件构成的，而且名字也是这个页面的名字开头。
微信小程序点击高亮显示并切换到对应的内容
XiehaiyanLI的博客
08-13 5151
点击高亮显示并切换到对应的内容具体实现方法： 先把头部要切换的标题渲染出来 把每个title点击后对应的内容渲染出来，这个时候是把所有的对应的内容渲染出来了，需要在data中定义一个selIndex当作当前点击的下标。 data: { typeList: [{ id: 1, typename: '推荐', content: '我是推荐内容' }, { id: 2, typename:
【微信小程序】页面tab栏与页面内容联动
yzq0820的博客
09-25 2545
​ 上一篇文章介绍了如何实现页面tab栏的基础效果（文章链接：http://t.csdn.cn/lyvYs），最终效果还是要与页面内容联动，具体要求是滑动页面，tab栏跟着滑动，点击tab栏页面内容跟着滑动如何实现联动呢？不妨我们可以将整个页面考虑成一个轮播图，tab栏就如同轮播图的那小点点，可以控制网那个页面点击，有了思路就非常的好实现了，这时候就需要阅读官网，了解那个属性可以跟轮播图绑定，从而实现点击滚动，滑动也可以使tab栏随之滚动 ​
小程序tab切换显示不同内容
leng0920的博客
04-19 1608
WXML： <view class='container'> <view class='customer-management-panel'> <view class='customer-management-nav-panel'> <view class='management-nav flex-between'> <view cl...
【uniapp】微信小程序点击切换内容栏，切换tab的vue写法
ONLYSRY的博客
07-26 875
代码】微信小程序点击切换内容栏，切换tab的vue写法。
微信小程序实现简单的点击切换功能(微信开发者工具)
黛琳ghz的博客，期待你的关注。
04-30 1万+
微信小程序实现简单的点击切换功能(微信开发者工具)
微信小程序实现tab切换
苏苏就是小苏苏的博客
01-14 1万+
1.实现效果 2.实现原理 循环一个数组，切换数据的时候根据index索引来动态的设置选中项，设置fixed定位，固定在顶部。 3.实现代码 <view class="hd"> <block wx:for="{{navList}}" wx:key="navList"> <view class="hd_flex {{nav_type == index ? 'hd_flex_on' : ''}}" catchtap="changeType" data-index="{
快速掌握微信小程序 tab 切换的实现技巧（可滑动切换）
热门推荐
希望看完文章的你能够带着答案离开。
05-09 2万+
快速掌握微信小程序 tab 切换的实现技巧（可滑动切换）
微信小程序实现页面tab切换
baorant24的博客
04-13 1896
微信小程序实现页面tab切换 问题背景 客户端开发过程中，实现页面切换是一个很常见的场景，本文将介绍一下微信小程序是如何实现页面tab切换的。 问题分析 小程序一个页面相关的文件结构如下： 问题解决 话不多说直接上代码。 (1)index.js，代码如下： const app = getApp() Page({ da...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值