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


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 相关文章推荐
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
微信小程序实现简单评论功能
Nov 28 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 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
如何过滤高亮显示非法字符
2006/10/09 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
基于python实现百度翻译功能
2019/05/09 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
Python hashlib模块加密过程解析
2019/11/05 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
高中生毕业学习总结的自我评价
2013/11/14 职场文书
学校创先争优活动总结
2014/08/28 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
青春雷锋观后感
2015/06/10 职场文书
英文投诉信格式
2015/07/03 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python