小程序?qū)崿F(xiàn)頁面多級來回切換的示例代碼

第小程序?qū)崿F(xiàn)頁面多級來回切換的示例代碼目錄第一步第二步全部完整代碼wxmljscss

第一步

首先通過swiper創(chuàng)建一個簡單的多tab頁面

通過觸發(fā)pagechange1方法中的事件對currentIndex來進行賦值，又通過currentIndex的改變使前端wxml對應(yīng)更改，這個部分對滑動和點擊的操作都一樣，無非就是使currentIndex對應(yīng)到各自的位置，通過數(shù)字來決定位置

//滑動

pagechange1:function(ee){

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

letcurrentPageIndex=this.data.currentIndex;

currentPageIndex=(currentPageIndex+1)%2;

this.setData({

currentIndex:currentPageIndex,

//點擊tab時觸發(fā)

titleClick:function(e){

this.setData({

//拿到當前索引并動態(tài)改變

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

!--內(nèi)容布局--

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

swiper-item

view內(nèi)容1/view

/swiper-item

swiper-item

view內(nèi)容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{

/*底部內(nèi)容樣式*/

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時觸發(fā)

titleClick:function(e){

this.setData({

//拿到當前索引并動態(tài)改變

currentIndex:e.currentTarget.dataset.idx

第二步

上一步完成后，下級頁面再加一個滑動頁面，當內(nèi)切換結(jié)束后，在做切換就是父級的切換操作

在內(nèi)容1的view中寫入代碼即可，由于父級代碼只能是小于2個頁面才有效，所以我們不用父級的這個滑動來做子滑動，不僅僅是因為bug的問題，這樣也避免了樣式和數(shù)據(jù)重復(fù)的問題

在這里我們插入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,//預(yù)設(shè)當前項的值

scrollLeft:0,//tab標題的滾動條位置

currentIndex:0,//默認是活動項切換

hideModal:false//遮罩層

部分完整js代碼：

//pages/leftSlide/leftSlide.js

constApp=getApp()

Page({

data:{

winHeight:"",//窗口高度

currentTab:0,//預(yù)設(shè)當前項的值

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