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

    我录制了个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点击空白弹窗关闭的方法是什么？

  现在很多网站都会做弹窗，但是我们知道频繁的弹窗和关闭不了的弹窗都是不利于用户体验的。为了提高用户的弹窗体验，我们能够使用vue实现点击空白区域来关闭弹窗。那么这要如何实现呢？下面给大家分享两个方法。

• JS和Typescript对比是怎样，特点用途是什么

  这篇文章主要介绍了 JavaScript 与 TypeScript之间的联系,JavaScript,也称为 JS,是一种符合 ECMAScript 规范的编程语言。这是一个高级别的、通常是即时编译的、多范式的。TypeScript 是一种强类型、面向对象的编译语言，更多消息内容,需要的朋友可以参考一下下面文章内容

• 如何使用jQuery实现轮播，代码是什么

  jquery实现轮播效果的方法：1、通过jquery的hover()绑定鼠标上悬以及离开时的事件处理；2、 通过jquery的bind()方法绑定鼠标点击事件处理前后翻动即可。

• 用vue怎样做添加购物车有抛物线显示的效果？

  经常浏览购物网站的朋友可能会看到这样的一个效果，就是添加商品到购物车的时候，会有抛物线这样的效果，那么这个具体是怎样做呢？接下来小编就带大家来了解一下。

• J中如何获取焦点，及判断是否获取焦点的方法是什么

  这篇文章主要给大家分享 JavaScript中document.activeELement焦点元素介绍，下面文章围绕了document.activeElement属性展开详细内容,需要的朋友可以参考一下，希望对大家有所帮助