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 style-roll_one"><text>左右可滑动1</text></view></swiper-item><swiper-item><view class="style-roll style-roll_two"><text>左右可滑动2</text></view></swiper-item><swiper-item><view class="style-roll style-roll_three"><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;}

以上代码参考链接：/weixin_42063951/article/details/102914307

新问题：

swiper默认的高度只有150px，动态加载数据时，数据显示不完整。

错误解决方法：简单设置 height:100%;

解决方法：

无论切换哪个选项卡或者进行页面间的滑动，都能根据页面的布局、数据量进行动态显示页面长度。

在 js 文件中添加如下方法：

_calculateContainerHeight() {var that = this;var query = wx.createSelectorQuery();if (this.data.navState == 0) {query.select('.style-roll_one').boundingClientRect(function (rect) {that.setData({// 获取要循环标签的高度widHeight: rect.height + 100 + "px"})}).exec();} else if (this.data.navState == 1) {query.select('.style-roll_two').boundingClientRect(function (rect) {that.setData({// 获取要循环标签的高度widHeight: rect.height + 100 + "px"})}).exec();} else {query.select('.style-roll_three').boundingClientRect(function (rect) {that.setData({// 获取要循环标签的高度widHeight: rect.height + 100 + "px"})}).exec();}},

修改如下三个方法

//监听滑块bindchange(e) {// console.log(e.detail.current)let index = e.detail.current;this.setData({navState: index})// 执行方法 this._calculateContainerHeight();},//点击导航navSwitch: function (e) {// console.log(e.currentTarget.dataset.index)let index = e.currentTarget.dataset.index;this.setData({navState: index})// 执行方法 this._calculateContainerHeight();},onLoad: function (options) {this._calculateContainerHeight();},