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


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 相关文章推荐
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
node.js中的buffer.toJSON方法使用说明
Dec 14 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
Bootstrap基础学习
Jun 16 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
JavaScript实现二维坐标点排序效果
Jul 18 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 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 Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
python opencv实现切变换 不裁减图片
2018/07/26 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
tensorflow之并行读入数据详解
2020/02/05 Python
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
十佳大学生事迹材料
2014/01/29 职场文书
爱护公物标语
2014/06/24 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
作风整顿剖析材料
2014/09/30 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers