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

    我录制了个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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• vue中setup函数的用法是什么？要注意哪些？

  这篇文章主要介绍vue中setup函数的使用，对于setup函数的特性和、作用和需要注意的点本文都有详细的介绍，另外还分享了setup函数使用的两种方法的实例，感兴趣的朋友可以参考，接下来我们一起了解看看吧。

• 用vue制作列表固定列滚动的思路和方法是什么

  这篇文章主要为大家详细介绍了vue实现列表固定列滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• Promise相关的面试题有哪些，如何解答

  这篇文章主要介绍了JS 9个Promise面试题，对异步Promise感兴趣的同学，可以参考下

• jQuery的优点和特点是什么，用来做什么用的

  jQuery是一bai个简洁而快速的JavaScript库，可用于du简化zhi事件处理，HTML文档遍历，Ajax交互和dao动画，以更快速开发网站

• JS实现排序算法有哪些方式，简单的实现是怎样的

  这篇文章主要给大家介绍了关于JavaScript实现的七种排序算法的相关资料,七种排序算法分别是：冒泡排序、选择排序、插入排序、希尔排序、堆排序、快速排序以及归并排序,需要的朋友可以参考下