微信小程序实现点击导航条切换页面


Posted in Javascript onNovember 19, 2020

本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码,供大家参考,具体内容如下

我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动。

微信小程序实现点击导航条切换页面

代码解说:

  • 首先我在js自定义了navState参数用于判断导航的当前状态,
  • 定义了data-index用于js中动态修改导航的当前状态,
  • nav-switch-style为选择导航条时的样式,
  • 不可滑动视图切换很简单,用wx:if判断状态显示相应页就好了,
  • 滑动页视图切换要用到swiper和 swiper-item,
  • 用bindchang方法监听滑块,current 改变时会触发 change 事件(还有个bindanimationfinish方法监听也是可以用的,详细请看官方文档)
  • 动态的绑定了current滑块的index,这样就可以实现点击导航条滑块跟着滚动,
  • 相反的,当滑动滑块时,就可以根据current的值来动态修改导航的状态了。

wxml代码:

<!-- 导航条 -->
<view class="nav">
 <view bindtap="navSwitch" data-index="0" class="{{navState==0 ? 'nav-switch-style':''}}">页面一</view>
 <view bindtap="navSwitch" data-index="1" class="{{navState==1 ? 'nav-switch-style':''}}">页面二</view>
 <view bindtap="navSwitch" data-index="2" class="{{navState==2 ? 'nav-switch-style':''}}">页面三</view>
</view>
<!-- 不可滑动页 -->
<view>
 <view wx:if="{{navState==0}}" class="style-default">1</view>
 <view wx:elif="{{navState==1}}" class="style-default">2</view>
 <view wx:else="{{navState==2}}" class="style-default">3</view>
</view>
<!-- 滑动页 -->
<swiper bindchange="bindchange" current="{{navState}}">
 <block>
 <swiper-item>
 <view class="style-roll">
 <text>左右可滑动1</text>
 </view>
 </swiper-item>
 <swiper-item>
 <view class="style-roll">
 <text>左右可滑动2</text>
 </view>
 </swiper-item>
 <swiper-item>
 <view class="style-roll">
 <text>左右可滑动3</text>
 </view>
 </swiper-item>
 </block>
</swiper>

js代码:

Page({
 data: {
 navState: 0,//导航状态
 },
 //监听滑块
 bindchange(e) {
 // console.log(e.detail.current)
 let index = e.detail.current;
 this.setData({
 navState:index
 })
 },
 //点击导航
 navSwitch: function(e) {
 // console.log(e.currentTarget.dataset.index)
 let index = e.currentTarget.dataset.index;
 this.setData({
 navState:index
 })
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {

 },
})

wxss代码:

.nav{
 display: flex;
 justify-content: space-around;
 padding: 20rpx;
 background-color: rgb(129, 241, 55);
 font-size: 30rpx;
}
.nav-switch-style{
 color: snow;
}
.style-default{
 background-color: rgb(247, 229, 130);
 padding: 100rpx 0;
 text-align: center;
}
.style-roll{
 background-color: rgb(130, 177, 247);
 padding: 100rpx 0;
 text-align: center;
}

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
javascript中日期转换成时间戳的小例子
Mar 21 Javascript
JQuery触发事件例如click
Sep 11 Javascript
7个JS基础知识总结
Mar 05 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
深入理解Node module模块
Mar 26 Javascript
让Vue也可以使用Redux的方法
May 23 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 Javascript
详解Vue的mixin策略
Nov 19 #Vue.js
微信小程序自定义底部弹出框功能
Nov 18 #Javascript
微信小程序实现底部弹出框
Nov 18 #Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 #Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 #Vue.js
基于Cesium绘制抛物弧线
Nov 18 #Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 #Vue.js
You might like
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
javascript multibox 全选
2009/03/22 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
windows下python之mysqldb模块安装方法
2017/09/07 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
Python如何实现邮件功能
2020/05/27 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
shell变量的作用空间是什么
2013/08/17 面试题
自我推荐信范文
2014/05/09 职场文书
质量安全标语
2014/06/07 职场文书
民政局个人整改措施
2014/09/24 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
个人汇报材料范文
2014/12/30 职场文书
学雷锋倡议书
2015/01/19 职场文书
内乡县衙导游词
2015/02/05 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
圆明园观后感
2015/06/03 职场文书
团组织推荐意见
2015/06/05 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA
如何使用SQL Server语句创建表
2022/04/12 SQL Server