微信小程序中实现点击导航条切换页面（可左右滑动视图）

我录制了个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;
}

微信小程序中实现点击导航条切换页面（可左右滑动视图）相关推荐

微信小程序实现点击导航条切换页面
本文实例为大家分享了微信小程序实现点击导航条切换页面的具体代码,供大家参考,具体内容如下我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动. 代码解说: 首先我在js自定义了navSta ...
微信小程序中使用wx.navigateTo跳转时页面出现空白
在微信小程序中当触发点击事件后跳转的页面时,跳转的页面出现空白,控制台报Page "pages/outline-xi/outline-xi" has not been regist ...
【uniapp】微信小程序中实现点击拨打电话的功能
手机端运行会直接调起电话按钮,代码如下: <view class="text2_button" @click="freeTell"><tex ...
微信小程序中识别html标签的方法
微信小程序中识别html标签的方法前言 rich-text组件前言在后台接口返回的数据中有些会带有标签,在微信小程序中如何将其直接渲染在页面呢? rich-text组件在微信小程序中有一个组件 ...
微信小程序中自定义导航和地图定位
在健康码中,主要的难点技术就是在小程序中定位.自定顶部导航. 自定义导航在微信小程序中,默认的顶部导航不能设置图片背景或者是透明背景,只能自定义导航. 在每一个页面中引入,就是得到自己定义[个性化的 ...
微信小程序中自定义背景导航栏透明背景设置
首先确定好自己要在哪个页面中使用自定义头部导航栏样式在该页面中找到xxx.json文件中添加上 "navigationStyle":''custom" 这样在页面中头部 ...
微信小程序页面栈_浅谈下微信小程序中的路由(页面跳转、返回、刷新、页面栈)...
什么是小程序里的"路由"?路由器吗?蒙蔽?好吧,在WEB应用中它其实就是分组数据包从源到目的地时,决定端到端路径的网络范围的进程:在小程序里就是设置页面的跳转,返回,自动刷新等一些 ...
在微信小程序中打开地图选择位置功能
在微信小程序中打开地图选择位置功能前言首先查看效果一.准备工作 1-1. **下载小程序地理定位** ,[qqmap-wx-jssdk.js](https://lbs.qq.com/miniPr ...
小程序 | 微信小程序中使用位置API打开地图
小程序 | 微信小程序中使用位置API打开地图一.效果展示二.代码实现使用微信内置地图查看位置,调用wx.openLocationAPI,具体内容可以查看微信官方文档. // js let In ...

微信小程序中实现点击导航条切换页面（可左右滑动视图）

微信小程序中实现点击导航条切换页面（可左右滑动视图）相关推荐

最新文章

热门文章