这篇文章给大家分享的是有关微信小程序实现切换页面的内容。小编觉得挺实用的，因此分享给大家做个参考，这里要实现的需求是，点击导航条可以切换部分页面，具体的实现效果如下，感兴趣的朋友就继续往下看吧。

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

    以上就是微信小程序实现切换页面效果的介绍，本文知识提供了一种切换页面的方法，仅供参考。想要了解更多微信小程序实现切换页面效果的内容，可以继续浏览群英网络其他相关的文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• ElementUI加载树形数据的过程是什么

  这篇文章主要为大家详细介绍了Vue组件库ElementUI实现表格加载树形数据教程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• JSBridge是什么?如何使用?

  这篇文章小编给大家分享的是JSBridge的内容，下文介绍了JSBridge是什么，JSBridge的原理和JSBridge的使用，文中示例介绍的很详细，感兴趣的朋友可以了解看看，下面让我们一起来学习一下吧！

• 用JS怎样编写一个2048小游戏？

  2048小游戏不知道大家有没有玩过，其实玩法很简单的，就是在有限的空间内，对相同的数字不断的合并，当空间被全部填满游戏就结束。本文给大家分享的就是用JS怎样编写一个2048小游戏的方法，感兴趣的朋友可以了解看看。

• 新手怎么理解JavaScript中this指向，有哪些要点

  这篇文章主要介绍了浅谈JavaScript this指向以及修改指向，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 基于vue怎么制作PC端和移动端的省市区级联选择功能

  这篇文章主要为大家详细介绍了vue实现省市区的级联选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下