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

    我录制了个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页面渲染中key的作用是什么？vue页面渲染实例分享

  文本主要给大家分享的是关于vue页面渲染中key的使用，下面有key的作用和用法介绍，以及实例，具有一定的借鉴价值，感兴趣的朋友可以参考学习。

• js怎样查找字符串的最长单词？教你3个技巧

  js如何查找字符串的最长单词？这篇文章给大家分享是关于基于Free Code Camp基本算法脚本来查找字符串的最长单词，本文会介绍三种方法，是小编比较推荐的，有需要的朋友可以看一看。

• Node.js中对象和字符串怎样互相转换，有什么方法？

  这篇文章我们来了解Node.js中实现对象和字符串互相转换的方法，对象和字符串互相转换并不难，下文示例代码可以参考，需要的朋友可以了解看看，接下来就跟随小编来一起学习一下吧！

• vue怎么实现打印功能？教你两种方法

  vue怎么实现打印功能？一些朋友对于打印页面的表格功能的实现比较好奇，因此这篇文章就给大家来分析一下vue实现打印功能实现的方法，下文有示例供大家参考，接下来跟随小编一起看看吧。

• reduce方法的基本使用是怎样，有哪些使用技巧？

  ​本篇文章给大家带来了关于JavaScript的相关知识，reduce是数组原型对象上的一个方法，可以帮助我们操作数组。本文将和大家分享4个关于JavaScript中数组reduce的用法，希望对大家有所帮助。