微信小程序导航栏制作
导航栏制作
微信小程序不同于H5,制作导航栏不方便,尤其是对于一个初学者来看:以为微信小程序中的Js与H5中的差不多,其实不然,以下就是我在学习微信小程序中制作的小程序导航栏。
页面代码
<view class="nav"><view class="{{style[0]}}" data-index="{{0}}" bind:tap="click1">页面1</view><view class="{{style[1]}}" data-index="{{1}}" bind:tap="click1">页面2</view>
</view>
<view><view hidden="{{hidden[0]}}">1</view><view hidden="{{hidden[1]}}">2</view>
</view>
样式代码
.nav{display: flex;justify-content: space-around;
}
.now{color: aqua;
}
js代码
Page({/*** 页面的初始数据*/data: {style:['now',''],hidden:[false,true]},click1(env) {let index=env.target.dataset.index;let style=this.data.style;let hidden =this.data.hidden;for(let i=0;i<style.length;i++){if(i==index){style[i]="now";hidden[i]=false;}else{style[i]="";hidden[i]=true;}}this.setData({style,hidden})},
效果图
微信小程序导航栏制作相关推荐
- 微信小程序导航栏或菜单栏吸顶效果简单实现
微信小程序导航栏或菜单栏吸顶效果简单实现 思路: 1.获取导航栏初始位置距顶部的距离s1(通过获取页面标签方法) 2.监听页面的滑动,获取滑动距离s2(使用onPageScroll) 3.当s2> ...
- 如何去掉微信小程序导航栏,以及禁止页面滑动
如何去掉微信小程序导航栏,以及禁止页面滑动 1.微信小程序要去掉微信自带的导航栏,只需要在app.json中加上 "navigationStyle": "custom&q ...
- 微信小程序导航栏高度。分析手机状态栏高度、微信小程序胶囊高度等。
//获取系统信息的概念 console.log(uni.getSystemInfoSync()); let res = uni.getSystemInfoSync() //胶囊按钮的信息 consol ...
- 微信小程序导航栏怎么写
微信小程序写到到导航栏还是非常简单得,就算没有三大框架的基础,也是非常容易理解`的. 接下来我们看看他是如何操作的: 以电商页面中常见的导航为例,会了这一种,就是会了很多种,到时根据具体需求改动即可: ...
- 使用taro自定义微信小程序导航栏
1.在app.config.js中的window配置项的内容替换为:"navigationStyle":"custom" custom表示自定义导航栏,但会保留 ...
- 微信小程序----导航栏透明渐变一(MUI导航栏透明渐变)
效果体验二维码 如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! DEMO下载 导航栏透明渐变效果 实现原理 利用position:absolute在导航下定位一个v ...
- 微信小程序----导航栏透明渐变二(MUI导航栏透明渐变)
效果体验二维码 如果文章对你有帮助的话,请打开微信扫一下二维码,点击一下广告,支持一下作者!谢谢! 导航栏透明渐变效果 实现原理 给page-group设置的背景颜色采用rgba; 通过改变rgba其 ...
- 定位微信小程序导航栏
定位微信小程序,首先做一个关于头部的组件, 主要是让这个组件的位置固定 这里需要使用到css的 fixed定位和z-index的属性 下面展示一些 内联代码片. // A code block var ...
- rax自定义微信小程序导航栏
一.导航栏样式 背景: 接到一个需求,需要自定义微信导航栏,并且展示如上图存在各种样式: 难点: 兼容IOS刘海屏,IOS药丸屏,安卓无框屏.H5正常屏幕.小程序退出后台不随页面滚动: navigat ...
最新文章
- TCP的3次握手和4次挥手过程
- 16位cpu 移位处理
- 【TensorFlow】——索引与切片
- linux软件包管理解析,linux学习笔记_09_软件包管理解析.doc
- 使用os.system调用外部程序,如wget下载
- 32怎么通过一个按键实现不同工作模式_stm32几种低功耗模式的实现和差别
- 2017年3月21日
- 最小二乘法和极大似然估计
- VS 2017 产品密钥
- Zipkin-1.19.0学习系列2:Nodejs范例(Client Send,Client Receive))
- JavaScript使用Modbus协议实现RTU设备连云
- 飘逸的python - 使用图像匹配SIFT算法进行LOGO检测
- sketch 3.8.1(破解版涵盖3.0,3.7,3.8.0以上版本) 安装and使用指南(20160524)更新)
- 以太网交换芯片及PHY处理相关
- (转)移动研究院待遇
- n个评委给m个选手打分python_n个评委为m个选手打分(n个评委打分总次数mn)。请问如何评判m个选手的成绩?...
- 安装金山WPS2013造成的HTML5 file.type值异常
- 适应多种通信规约(RS485|红外)的智能电表远程无线抄表的解决方案
- 防疫宣传二维码有哪些优势?
- 计算机考试操作题怎么做,计算机考试操作题的做法
热门文章
- android framework资源,android源码framework下添加新资源的方法
- Android 9.0 MTK平台 修改热点自动关闭功能(保持热点打开)
- kubernetes学习笔记-就绪探针20220405
- 关于chrome卡屏解决方案总结
- 艾美捷卵清蛋白(OVA),高纯度低内毒素介绍
- Windows 下安装 CUDA 和 Pytorch 跑深度学习
- TeamViewer v15.1.3937 精简单文件版+便携版
- 网络营销推广有哪些误区?正确的网络推广思路和操作方法
- Jetson nano裸机介绍及 Opencv的环境配置
- Java 接口回调机制