小程序实现页面多级来回切换的示例代码

第小程序实现页面多级来回切换的示例代码目录第一步第二步全部完整代码wxmljscss

第一步

首先通过swiper创建一个简单的多tab页面

通过触发pagechange1方法中的事件对currentIndex来进行赋值，又通过currentIndex的改变使前端wxml对应更改，这个部分对滑动和点击的操作都一样，无非就是使currentIndex对应到各自的位置，通过数字来决定位置

//滑动

pagechange1:function(ee){

if("touch"===ee.detail.source){

letcurrentPageIndex=this.data.currentIndex;

currentPageIndex=(currentPageIndex+1)%2;

this.setData({

currentIndex:currentPageIndex,

//点击tab时触发

titleClick:function(e){

this.setData({

//拿到当前索引并动态改变

currentIndex:e.currentTarget.dataset.idx

这个部分完整代码如下：

wxml

view

!--Tab布局--

view

viewbindtap='titleClick'data-idx='0'

textclass="{{0==currentIndex'fontColorBox':''}}"安卓/text

hrclass="{{0==currentIndex'lineBox':'notLineBox'}}"/

/view

viewbindtap='titleClick'data-idx='1'

textclass="{{1==currentIndex'fontColorBox1':''}}"苹果/text

hrclass="{{1==currentIndex'lineBox':'notLineBox'}}"/

/view

/view

!--内容布局--

swiperbindchange='pagechange1'current='{{currentIndex}}'

swiper-item

view内容1/view

/swiper-item

swiper-item

view内容2/view

/swiper-item

/swiper

/view

wxss

Page{

/*全局样式*/

background:rgb(244,245,249);

height:100%;

position:fixed;

.fontColorBox,

.fontColorBox1{

/*文字默认颜色*/

color:black;

.navBox{

/*顶部tab盒子样式*/

width:100%;

height:108rpx;

background:white;

display:flex;

align-items:center;

justify-content:center;

.navBoxview:last-child{

/*最后一个tab标题的样式*/

padding-left:20%;

.titleBox{

/*未选中文字的样式*/

color:rgb(168,170,175);

font-size:30rpx;

display:flex;

flex-direction:column;

align-items:center;

.lineBox,.notLineBox{

/*选中及未选中底线共同样式*/

width:32rpx;

height:8rpx;

.lineBox{

/*选中底线样式*/

background:rgb(43,44,45);

margin-top:16rpx;

border-radius:4rpx;

.notLineBox{

/*未选中底线样式*/

background:transparent;

.swiperTtemBox{

/*底部内容样式*/

height:100vh;

overflow:scroll;

margin:12rpx0rpx;

background:white;

font-size:28rpx;

js

constapp=getApp()

Page({

data:{

currentIndex:0,//默认第一个

pagechange1:function(ee){

if("touch"===ee.detail.source){

letcurrentPageIndex=this.data.currentIndex;

currentPageIndex=(currentPageIndex+1)%2;

this.setData({

currentIndex:currentPageIndex,

//点击tab时触发

titleClick:function(e){

this.setData({

//拿到当前索引并动态改变

currentIndex:e.currentTarget.dataset.idx

第二步

上一步完成后，下级页面再加一个滑动页面，当内切换结束后，在做切换就是父级的切换操作

在内容1的view中写入代码即可，由于父级代码只能是小于2个页面才有效，所以我们不用父级的这个滑动来做子滑动，不仅仅是因为bug的问题，这样也避免了样式和数据重复的问题

在这里我们插入wxml代码：

view

scroll-viewscroll-x="true"scroll-left="{{scrollLeft}}"

viewclass="tab-item{{currentTab==0'active':''}}"data-current="0"bindtap="swichNav"热门/view

viewclass="tab-item{{currentTab==1'active':''}}"data-current="1"bindtap="swichNav"影音/view

viewclass="tab-item{{currentTab==2'active':''}}"data-current="2"bindtap="swichNav"阅读/view

viewclass="tab-item{{currentTab==3'active':''}}"data-current="3"bindtap="swichNav"游戏/view

viewclass="tab-item{{currentTab==4'active':''}}"data-current="4"bindtap="swichNav"福利/view

/scroll-view

swipercurrent="{{currentTab}}"duration="300"bindchange="switchTab"

swiper-item

scroll-viewscroll-y="true"

view

view

imagesrc="/9/B/A/0_qq_35230125"/image

/view

view

view剪影安卓版/view

view111人下载/view

view这只是一个简介，看的话点击详情最大/view

/view

viewbindtap="show_hideModal"下载/view

!--navigatorurl="/pages/askExpert/expertDetail"问TA/navigator--

/view

/scroll-view

/swiper-item

swiper-item

scroll-viewscroll-y="true"

view

view

imagesrc="/avatar.png"/image

/view

view

view欢颜/view

view知名情感博主/view

view134个回答，2234人听过/view

/view

navigatorurl="/pages/askExpert/expertDetail"问T2A/navigator

/view

/scroll-view

/swiper-item

swiper-item

scroll-viewscroll-y="true"

view

view

imagesrc="/avatar.png"/image

/view

view

view欢颜/view

view知名情感博主/view

view134个回答，2234人听过/view

/view

navigatorurl="/pages/askExpert/expertDetail"问T2A/navigator

/view

/scroll-view

/swiper-item

swiper-item

scroll-viewscroll-y="true"

view

view

imagesrc="/avatar.png"/image

/view

view

view欢颜/view

view知名情感博主/view

view134个回答，2234人听过/view

/view

navigatorurl="/pages/askExpert/expertDetail"问T2A/navigator

/view

/scroll-view

/swiper-item

swiper-item

scroll-viewscroll-y="true"

view

view

imagesrc="/avatar.png"/image

/view

view

view欢颜/view

view知名情感博主/view

view134个回答，2234人听过/view

/view

navigatorurl="/pages/askExpert/expertDetail"问T2A/navigator

/view

/scroll-view

/swiper-item

/swiper

/view

js加入：

data:{

winHeight:"",//窗口高度

currentTab:0,//预设当前项的值

scrollLeft:0,//tab标题的滚动条位置

currentIndex:0,//默认是活动项切换

hideModal:false//遮罩层

部分完整js代码：

//pages/leftSlide/leftSlide.js

constApp=getApp()

Page({

data:{

winHeight:"",//窗口高度

currentTab:0,//预设当前项的值

scrollLeft:0,//tab标题的滚动条位置

currentIndex:0,//默认是活动项切换

hideModal:false//遮罩层

//滚动切换标签样式

switchTab:function(e){

letthat=this;

that.setData({

currentTab:e.detail.current

that.checkCor();

//点击标题切换当前页时改变样式

swichNav:function(e){

varcur=e.target.dataset.current;

console.log(cur);

if(this.data.currentTaB==cur){returnfalse;}

else{

this.s