怎么编写微信小程序选项卡

于 2024-07-04 08:59:32 发布
阅读量305 收藏 5
点赞数 6
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eodkx/article/details/140161927
版权

先在微信开发者工具新建项目

​​​​

在资源管理器找到app.json

小程序的的公共部分都是在这个里面编写
在这里插入图片描述

打开app.json

创建编写选项卡的文件

推荐先把下图这部分删掉
在这里插入图片描述
然后在pages中写要创建的选项卡及路径（选项卡最多5个至少2个，小程序优先显示第一个选项卡）
在这里插入图片描述
保存之后可以在pages文件夹下看到刚才新建的选项卡的文件
在这里插入图片描述

选项卡的名称及显示图片

先创建一个保存图片的文件夹把他放在pages同级的文件夹下（不能使用网络图片，必须用本地图片）

在这里插入图片描述
回到app.json
在里面打出tabBar选择第一个
在这里插入图片描述
然后会出来下面这些代码根据自己的需要填写对应的东西
在这里插入图片描述
多个选项卡用逗号隔开
在这里插入图片描述
最终效果如下
在这里插入图片描述

eodkx
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序 选项卡
撑戌圆爱痒生
08-06 452
微信小程序 选项卡wxhml部分js部分wxss部分 wxhml部分 <!-- 选项卡 --> <view class="cardout"> <view catchtap="changecardleft" class="leftcard {{card==0?'cho':''}}">一级</view> <view catchtap="changecardright" class="rightcard {{card==1?'cho':''}}"&gt
微信小程序 tab选项卡
qq_37916164的博客
08-08 699
效果图： .wxml <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">车牌校验</view> <view class="swiper-tab-i...
微信小程序选项卡
qq_21559819的博客
11-08 128
微信小程序选项卡 相关资料： https://segmentfault.com/a/1190000016300102 https://www.iteye.com/blog/huan1993-2425789
微信小程序之选项卡
weixin_34110749的博客
09-06 253
选项卡随处可见，微信小程序中也不例外，下面来写一个简单的小程序选项卡 思路 之前写过基于swiper的选项卡，在小程序中有swiper组件，毫无疑问这里要用到swiper组件 小程序中的swiper组件有个问题就是不能根据内容自适应高度，所以要通过wx.getSystemInfoSync获取设备高度设置swiper高度 小程序中的sw...
微信小程序实现选项卡功能
08-28
微信小程序实现选项卡功能是指在微信小程序中实现选项卡的交互功能，通过点击不同的选项卡按钮，展示相应的内容。下面将详细介绍微信小程序实现选项卡功能的方法和原理。 微信小程序实现选项卡功能的原理是通过使用...
微信小程序实现选项卡效果
01-03
本文实例为大家分享了微信小程序实现选项卡效果展示的具体代码，供大家参考，具体内容如下 demo.wxss .swiper-tab{ width: 100%; border-bottom: 2rpx solid #777777; text-align: center; line-height: 80rpx...
微信小程序之选项卡的实现方法
12-29
从事前端的同学们一定不会对选项卡陌生，不管是自己原生写的，还是各个UI框架里带的，我想大家都使用过很多选项卡，对选项卡的原理也足够清楚了，下面我们来在微信小程序里实现选项卡的功能。 微信小程序里没有自带...
微信小程序选项卡页面切换
01-31
本话题聚焦于微信小程序中的选项卡页面（TabBar）的切换实现，这是一种常见的用户界面设计，用于在多个主要功能间快速切换。 在微信小程序中，选项卡页面通常位于底部，通过预定义的`tabBar`配置来实现。`tabBar`是...
微信小程序实现顶部普通选项卡效果(非swiper)
08-29
微信小程序实现顶部普通选项卡效果是微信小程序开发中的一项常见需求，本篇文章将详细介绍如何使用微信小程序实现顶部普通选项卡效果，且不使用swiper组件。这种实现方式具有一定的参考价值，感兴趣的小伙伴们可以...
微信小程序实现顶部选项卡(swiper)
08-29
主要为大家详细介绍了微信小程序实现顶部选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序 tab 顶部选项卡下载
12-01
微信小程序 tab 顶部选项卡
微信小程序 滑动选项卡示例源码
05-17
本人收藏的微信小程序“滑动选项卡”示例源码，可以参考学习
微信小程序---选项卡
donghuzi1
07-21 322
小程序选项卡 <view class="box"> <view class="item '{{index===0?'active':''}}'" data-index="{{0}}" bindtap="fn">1</view> <view class="item '{{index===1?'active':''}}'" data-index="{{1}}" bindtap="fn">2</view> <view class="item '{{
微信小程序——设置选项卡
weixin_58963766的博客
07-09 1191
以下图的两个文件为例。
微信小程序选项卡功能
weixin_30648587的博客
07-12 288
首先看看微信小程序上的选项卡的效果 原理呢，就是先布局好（这就不必说了吧），然后在上面的每一个选项卡上都定义一个同样的点击事件，然后给每一个组件上绑定一个唯一的标识符，然后点击事件触发的时候，获取到绑定的标识符，判断当前点击的是哪个选项卡，然后再判断下面该显示哪一块，现在上代码： wxml: <view class="menu_box"> <text cl...
微信小程序，我的，对应选项卡
weixin_63954739的博客
10-02 196
先开始我的页面的wxml。app.js里面添加。
微信小程序开发（3.选项卡）
wuhuayfz的博客
03-19 339
在.js里设置list 和 num的值 写view标签，里面写个text标签， class名用三目运算做判断，wx：for"{{list}}"遍历list，添加点击事件change，data-id={{index}}获取下标 编写样式 在.js中写change点击事件的方法 用e.target.id读取被选中组件的id值。 ...
微信小程序学习笔记：选项卡
uMson_n的博客
03-20 2471
微信小程序顶部选项卡
微信小程序选项卡轮播图
最新发布
06-22
微信小程序中的选项卡轮播图，通常指的是TabBar和Swiper组件结合使用，用于展示多个页面或内容模块的一种常见设计。TabBar是一个底部导航栏，用户可以通过点击不同的标签快速切换到相应的页面。Swiper则是用来实现轮播效果的组件，可以在TabBar所对应的页面中显示一系列的图片或者内容块。 具体实现步骤如下： 1. **设置TabBar**: 在`app.json`文件中配置TabBar，定义各个选项卡的标题、路径以及对应的页面。 ```json { "tabBar": { "color": "#666", "selectedColor": "#f00", "list": [ { "pagePath": "pages/home/home", "text": "首页", "iconPath": "path/to/icon1.png" }, { "pagePath": "pages/news/news", "text": "新闻", "iconPath": "path/to/icon2.png" }, ... // 更多选项 ] } } ``` 2. **在页面中使用Swiper**：在对应的页面如`home.wxml`中，引入Swiper组件，并配置滑动效果和图片路径。 ```html <swiper> < swiper-item wx:for="{{items}}" wx:key="*this"> <image src="{{item.image}}" /> </swiper-item> </swiper> ``` 3. **控制滑动逻辑**: 在对应的`home.js`文件中，通过数据绑定和事件处理来控制Swiper的切换。 ```javascript Page({ data: { items: [ { image: 'path/to/image1.jpg' }, { image: 'path/to/image2.jpg' }, ... ] }, onTabItemTap: function(e) { // 当用户点击TabBar时触发 let index = e.detail.index; this.setData({ currentTab: index }); }, }) ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值