微信小程序开发 — 顶部导航栏
直接看代码吧,第一部分是wxml部分
<view class='nav'><text class='{{curNum==index?"cur":""}}' data-navindex="{{index}}" wx:for="{{nav}}" wx:key=" " bindtap='tabnav'>{{item}}</text>
</view><!--已处理页面-->
<view wx:if="{{curNum==0}}"><button>ASD</button>
</view>
<!--未处理页面-->
<view wx:if="{{curNum==1}}"><button>A\DSD</button>
</view>
接下来的wxss部分
/*导航栏开*/
.nav{display: flex;height: 90rpx;background: #fff;
}
.nav text{/* 等分 */flex: 1;text-align: center;line-height: 90rpx;height: 90rpx;
}
/* 被选中的样式 */
.nav text.cur{color: hsl(226, 66%, 45%);border-bottom: 4rpx solid hsl(244, 72%, 33%);
}
/*导航栏完*/
接下来的js部分
data: {nav:["已处理","未处理"],curNum: 0,},tabnav: function (ev) {let index = ev.currentTarget.dataset.navindexthis.setData({curNum: index})},
思路就是点击不同的字,然后修改对应的值,显示对应的页面。
微信小程序开发 — 顶部导航栏相关推荐
- 微信小程序 自定义顶部导航栏标题 navigationStyle
微信小程序 自定义顶部导航栏标题 单页面自定义导航栏 修改需要自定义的页面,的页面配置.json文件 全部页面自定义导航 修改公共页面配置app.json 单页面自定义导航栏 修改需要自定义的页面,的 ...
- 微信小程序制作顶部导航栏
1问题描述 使用微信小程序开发者工具制作顶部导航栏. 2算法描述 首先就是对微信小程序开发者工具的配置,官网搜索后进入,选择稳定版,Windows64位下载. 然后点开开发者工具,选择小程序,点击图片 ...
- 微信小程序之顶部导航栏(选项卡)实例 —— 微信小程序实战系列(1)
需求:顶部导航栏 效果图: wxml: <!--导航条--> <view class="navbar"><text wx:for="{{na ...
- uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果 使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色 全局定义导航栏 "windo ...
- 微信小程序实现顶部导航栏渐变
在小程序开发的过程中,会遇到一些页面上的要求,要求实现顶部导航栏的渐变如何实现,因为小程序做了一些封装,下面看看页面的布局图: 如图所示,实际上我们能够操作的页面只有中间那一块,那么,如果客户需要使用 ...
- 原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下 实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
- 微信小程序中顶部导航栏全局切换
一.场景 微信小程序和企业微信小程序共用一个,从不同入口进入小程序显示不同的顶部导航栏 二.思路 1.app.json中全局设置只能写死一个,无法实现 2.app.js中直接使用wx.setNavig ...
- 微信小程序自定义顶部导航栏navigationBar
自定义navigationBar怎么做? 去掉原生导航栏. 将需要自定义navigationBar页面的page.json的navigationBarTitleText去掉. 加上"navi ...
- 微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列(7)
设置标题栏 标题栏window 在app.json文件里面,通过window对象里面的属性进行设置 示例: app.json: 运行: 设置导航栏 导航栏TabBar 如果我们的小程序是一个多 tab ...
最新文章
- typera插入网站
- eclipse 跑maven命令_maven编写命令行执行mvn package没问题,eclipse执行报错
- java substring截取字符串_java基础教程之字符串的介绍,比较重要的一个知识点【下】...
- 正则表达式中原子的5种类型
- linux java echo 3,Linux常用命令13 - echo
- wps中,点空格或者enter之后首字母变大写问题
- Algorithms Part 1-Question 6- 2SUM Median-数和以及中位数问题
- 如何更好利用大数据的优势
- ParticleSystem的使用
- 网络是怎样连接的_户根勤(带目录)
- 1137:加密的病历单
- Android PackageInstaller:安装应用的应用,从三流Android外包到秒杀阿里P7
- 算法效率的度量--时间复杂度与空间复杂度
- 倒车轨迹理论实现方法
- 什么是下一代防火墙NGFW(Next Generation Firewall)?
- DL2 - Improving Deep Neural Networks- Hyperparameter tuning, Regularization and Optimization
- 问题 D: 分解质因数
- 二级联动 三级联动 多级联动 无限级联动下拉列表或菜单专题
- 逻辑电路复杂?我们用Logisim一键解决
- 跟鹅厂老司机学技术:如何实现百万人同时参与的直播答题?
热门文章
- Druid sql injection violation, part alway false condition not allow
- HDUOJ 4687 Boke and Tsukkomi
- Qt+OpenCV联合开发(十八)--多边形填充与绘制
- 奇特小鱼全身流动着透明血液
- hdu 1045Fire Net (建图 、二分匹配)
- 微信中使用Emoji表情,PHP转义代码
- Java之项目用到类Objects,TreeMap排序简单分享
- 软件工程案例教程·韩万江【课后习题】
- 9宫格解锁 android_手机九宫格解锁密码忘记了怎么办?忘记安卓九宫格解锁密码解决方法...
- 前端解决跨域-代理服务器-跨域(二)