微信小程序菜单栏进行切换页面

最新推荐文章于 2024-08-07 22:38:02 发布
最新推荐文章于 2024-08-07 22:38:02 发布
阅读量5.6k 收藏 20
点赞数 6
分类专栏： 微信小程序 文章标签： 初识微信小程序第二篇页面切换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41715982/article/details/82758070
版权
本文介绍了微信小程序中如何通过wxml文件设计、js脚本和wxss样式布局实现页面菜单栏的切换功能。在wxml中定义了三个可点击的选项卡，使用数据绑定改变选中状态；在js中编写事件处理函数`checkCurrent`和`bindchange`来响应用户的切换操作，更新当前页面索引；最后，wxss中设置了相应的样式使页面布局美观。
摘要由CSDN通过智能技术生成

一.页面wxml文件设计部分代码：

<view class='topTabSwiper'>

<view class='tab { {currentData == 0 ? "tabBorer" : ""}}' data-current = "0" bindtap='checkCurrent'>推荐</view>

<view class='tab { {currentData == 1 ? "tabBorer" : ""}}' data-current = "1" bindtap='checkCurrent'>热点</view>

<view class='tab { {currentData == 2 ? "tabBorer" : ""}}' data-current = "2" bindtap='checkCurrent'>关注</view>

</view>

<swiper current="{ {currentData}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">

<swiper-item><view class='swiper_con'>这是个推荐页面</view>

</swiper

最低0.47元/天 解锁文章
一一冷一一
关注
专栏目录
微信小程序下拉框插件_微信小程序模拟下拉菜单开发实例
weixin_39609166的博客
12-20 366
微信小程序模拟下拉菜单开发实例,页面,列表,就会,子集,菜单微信小程序模拟下拉菜单开发实例易采站长站，站长之家为您整理了微信小程序模拟下拉菜单开发实例的相关内容。本文主要和大家分享微信小程序模拟下拉菜单开发实例，希望能帮助到大家。一.知识点1.实现动态显示和隐藏某个控件列表1data:{ open:false }, showitem:function(){ this.setDa...
html底部导航栏图标切换,【微信小程序】自定义底部导航栏，切换不同页面显示不同tabbar...
weixin_34804678的博客
06-08 1117
https://blog.csdn.net/small_lack/article/details/80959278在一个微信小程序中想要用到两种不同的tabbar样式，需要在app.js中自定义，在页面加载时进行调用。比如一个小程序需要两个版本(用户版、商家版)，并且能通过一个按钮在两个版本间进行切换，可能会用到这种方式。此处以两个页面(index，logs)显示两种tabbar样式为例，通过切换...
微信小程序实现下拉菜单切换效果
10-17
主要为大家详细介绍了微信小程序实现下拉菜单切换效果，筛选条件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序 - 自定义底部菜单栏
最新发布
觉醒法师的专栏
08-07 1653
微信小程序底部菜单栏是可以通过自定义来实现的。主要涉及：新建组件、编写组件代码、设置样式、配置导航栏、在页面中引用。自定义底部导航栏可以创建出符合项目设计需求效果，实现个性化的页面切换功能。
微信小程序选项卡 点击导航内容切换 滑动内容导航切换
————————————————————————————————
10-20 547
index.wxml: <!--index.wxml--> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">导航1</view> <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" d
微信小程序实现侧边分类栏
10-16
在微信小程序中实现侧边分类栏是一项常见的功能需求，它可以帮助用户更方便地浏览和选择不同的商品或内容类别。本篇文章将详细讲解如何使用微信小程序开发工具来创建这样一个功能。 首先，我们需要理解微信小程序的...
微信小程序自定义菜单切换栏tabbar组件代码实例
10-15
自定义菜单切换栏tabbar组件是微信小程序中用于底部导航的一个重要组件，它允许开发者自定义底部的导航栏，为用户提供快速切换不同页面的功能。 在微信小程序中，tabbar是固定在小程序底部的一个导航栏，用户可以...
微信小程序源码-仿酷狗音乐微信小程序
09-28
对于“仿酷狗音乐微信小程序”的具体实现，我们可以从以下几个方面进行深入研究： 1. 音乐播放功能：这涉及到音频播放API的使用，包括加载音乐资源、播放、暂停、停止、切换歌曲等功能。开发者需要处理音乐播放状态...
微信小程序-轮播图+菜单.zip
04-20
在“微信小程序-轮播图+菜单.zip”这个压缩包中，包含了一个微信小程序的基础模板，该模板集成了轮播图（swiper）和菜单（menu）功能，方便开发者快速构建具有这两项功能的小程序页面。 轮播图（Swiper）是移动应用...
微信底部菜单，移动端底部导航菜单，超级牛叉底部固定菜单，H5移动端底部固定菜单栏目，4个打包
02-21
微信底部菜单，移动端底部导航菜单，超级牛叉底部固定菜单，样式非常绚丽，H5移动端底部固定菜单栏目，4个打包，需要的下载交流，
微信小程序-底部导航切换代码
qq_38810813的博客
12-20 250
注意 在app.json中配置tabBar 如下图???? 1.pagePath 导航栏的url地址 2.iconPath 图标的url地址 3.selectedIconPath 图标被选中的url地址 4.text 导航本文
微信小程序登录注册页面代码
m0_57790713的博客
02-22 1万+
上面代码中，index.wxml 文件定义了注册页面的视图，包括用户名、密码、确认密码的输入框以及提交按钮和一个跳转到登录页面的链接。index.js 文件定义了注册页面的逻辑，当用户点击提交按钮时会发送注册请求，并根据请求的返回结果进行提示和页面跳转。login.js 文件类似地定义了登录页面的逻辑
微信小程序实现简易切换
於菟
06-19 1971
微信小程序实现简易切换 废话不多说，先上图 收入界面 支出界面 .wxml <button type="primary" bindtap="Income">收入</button> <button type="warn" bindtap="Expenditure">支出</button> <view wx:if="{{chooseIncome == true}}"> 这是收入界面 </view> <view
快速掌握微信小程序 tab 切换的实现技巧（可滑动切换）
Shids_的博客
05-09 2万+
快速掌握微信小程序 tab 切换的实现技巧（可滑动切换）
微信小程序开发之选项卡(窗口底部TabBar)页面切换
热门推荐
dzp_coder
10-23 3万+
微信小程序开发中窗口底部tab栏切换页面很简单很方便. 代码: 1.app.json //app.json { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgro
微信小程序 动画效果切换菜单
weixin_45527865的博客
10-19 928
<view class="box" style="position:relative;"> <view class="move-item" style="transform:translateX({{transX}}px);width:{{width}}px;"></view> <view class="item {{active===index?'active':''}}" wx:for="{{list}}" key='*this' bindtap=...
微信小程序左滑菜单实现与图文展示
本文将详细介绍如何在微信小程序中实现用户通过左滑动操作显示侧边菜单的功能。首先，我们来看一下所给的代码结构，它主要包括以下几个部分： 1. **页面布局**: - `page`容器定义了整个页面的基本结构。 - `page-...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值