小程序?qū)崿F(xiàn)頁(yè)面多級(jí)來(lái)回切換的示例代碼
更新時(shí)間：2022年07月07日 08:54:42 作者：德宏大魔王
這篇文章主要為大家詳細(xì)介紹了小程序如何頁(yè)面多級(jí)來(lái)回切換支持滑動(dòng)和點(diǎn)擊操作，文中的實(shí)現(xiàn)步驟講解詳細(xì)，快跟隨小編一起動(dòng)手嘗試一下吧
第一步
首先通過(guò)swiper創(chuàng)建一個(gè)簡(jiǎn)單的多tab頁(yè)面
通過(guò)觸發(fā)pagechange1方法中的事件對(duì)currentIndex來(lái)進(jìn)行賦值，又通過(guò)currentIndex的改變使前端wxml對(duì)應(yīng)更改，這個(gè)部分對(duì)滑動(dòng)和點(diǎn)擊的操作都一樣，無(wú)非就是使currentIndex對(duì)應(yīng)到各自的位置，通過(guò)數(shù)字來(lái)決定位置
//滑動(dòng)
pagechange1: function (ee) {
if ("touch" === ee.detail.source) {
let currentPageIndex = this.data.currentIndex;
currentPageIndex = (currentPageIndex + 1) % 2;
this.setData({
currentIndex: currentPageIndex,
})
}
},
//點(diǎn)擊tab時(shí)觸發(fā)
titleClick: function (e) {
this.setData({
//拿到當(dāng)前索引并動(dòng)態(tài)改變
currentIndex: e.currentTarget.dataset.idx
})
},
這個(gè)部分完整代碼如下：
wxml
<view>
<!-- Tab布局 -->
<view class='navBox'>
<view class='titleBox' bindtap='titleClick' data-idx='0'>
<text class="{{0 == currentIndex ? 'fontColorBox' : ''}}">安卓</text>
<hr class="{{0 == currentIndex ? 'lineBox' : 'notLineBox'}}" />
</view>
<view class='titleBox' bindtap='titleClick' data-idx='1'>
<text class="{{1 == currentIndex ? 'fontColorBox1' : ''}}">蘋(píng)果</text>
<hr class="{{1 == currentIndex ? 'lineBox' : 'notLineBox'}} " />
</view>
</view>
<!-- 內(nèi)容布局 -->
<swiper class='swiperTtemBox' bindchange='pagechange1' current='{{currentIndex}}'>
<swiper-item class='swiperTtemBox'>
<view>內(nèi)容1</view>
</swiper-item>
<swiper-item class='swiperTtemBox'>
<view>內(nèi)容2</view>
</swiper-item>
</swiper>
</view>wxss
Page {
/* 全局樣式 */
background: rgb(244, 245, 249);
height: 100%;
position: fixed;
}
.fontColorBox,
.fontColorBox1 {
/* 文字默認(rèn)顏色 */
color: black;
}
.navBox {
/* 頂部tab盒子樣式 */
width: 100%;
height: 108rpx;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
.navBox view:last-child {
/* 最后一個(gè)tab標(biāo)題的樣式 */
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 {
/* 底部?jī)?nèi)容樣式 */
height: 100vh;
overflow: scroll;
margin: 12rpx 0rpx;
background: white;
font-size: 28rpx;
}
js
const app = getApp()
Page({
data: {
currentIndex: 0, //默認(rèn)第一個(gè)
},
pagechange1: function (ee) {
if ("touch" === ee.detail.source) {
let currentPageIndex = this.data.currentIndex;
currentPageIndex = (currentPageIndex + 1) % 2;
this.setData({
currentIndex: currentPageIndex,
})
}
},
//點(diǎn)擊tab時(shí)觸發(fā)
titleClick: function (e) {
this.setData({
//拿到當(dāng)前索引并動(dòng)態(tài)改變
currentIndex: e.currentTarget.dataset.idx
})
},
})
第二步
上一步完成后，下級(jí)頁(yè)面再加一個(gè)滑動(dòng)頁(yè)面，當(dāng)內(nèi)切換結(jié)束后，在做切換就是父級(jí)的切換操作
在“內(nèi)容1”的view中 寫(xiě)入代碼即可，由于父級(jí)代碼只能是小于2個(gè)頁(yè)面才有效，所以我們不用父級(jí)的這個(gè)滑動(dòng)來(lái)做子滑動(dòng)，不僅僅是因?yàn)閎ug的問(wèn)題，這樣也避免了樣式和數(shù)據(jù)重復(fù)的問(wèn)題
在這里我們插入wxml代碼：
<view >
<scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
<view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">熱門(mén)</view>
<view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">影音</view>
<view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">閱讀</view>
<view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">游戲</view>
<view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">福利</view>
</scroll-view>
<swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab"
style="height:{{winHeight}}rpx">
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="https://profile.csdnimg.cn/9/B/A/0_qq_35230125"></image>
</view>
<view class="expertInfo">
<view class="name">剪影安卓版</view>
<view class="tag">111人下載</view>
<view>這只是一個(gè)簡(jiǎn)介，看的話點(diǎn)擊詳情最大</view>
</view>
<view class="askBtn" bindtap="show_hideModal">下載</view>
<!-- <navigator url="/pages/askExpert/expertDetail" class="askBtn">問(wèn)TA</navigator> -->
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
</view>
<view class="expertInfo">
<view class="name">歡顏</view>
<view class="tag">知名情感博主</view>
<view class="answerHistory">134個(gè)回答，2234人聽(tīng)過(guò) </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn">問(wèn)T2A</navigator>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
</view>
<view class="expertInfo">
<view class="name">歡顏</view>
<view class="tag">知名情感博主</view>
<view class="answerHistory">134個(gè)回答，2234人聽(tīng)過(guò) </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn">問(wèn)T2A</navigator>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
</view>
<view class="expertInfo">
<view class="name">歡顏</view>
<view class="tag">知名情感博主</view>
<view class="answerHistory">134個(gè)回答，2234人聽(tīng)過(guò) </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn">問(wèn)T2A</navigator>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
</view>
<view class="expertInfo">
<view class="name">歡顏</view>
<view class="tag">知名情感博主</view>
<view class="answerHistory">134個(gè)回答，2234人聽(tīng)過(guò) </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn">問(wèn)T2A</navigator>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
js加入：
data: {
winHeight:"",//窗口高度
currentTab:0, //預(yù)設(shè)當(dāng)前項(xiàng)的值
scrollLeft:0, //tab標(biāo)題的滾動(dòng)條位置
currentIndex: 0, //默認(rèn)是活動(dòng)項(xiàng) 切換
hideModal:false//遮罩層
},
部分完整js代碼：
// pages/leftSlide/leftSlide.js
const App = getApp()
Page({
data: {
winHeight:"",//窗口高度
currentTab:0, //預(yù)設(shè)當(dāng)前項(xiàng)的值
scrollLeft:0, //tab標(biāo)題的滾動(dòng)條位置
currentIndex: 0, //默認(rèn)是活動(dòng)項(xiàng) 切換
hideModal:false//遮罩層
},
// 滾動(dòng)切換標(biāo)簽樣式
switchTab:function(e){
let that=this;
that.setData({
currentTab:e.detail.current
});
that.checkCor();
},
// 點(diǎn)擊標(biāo)題切換當(dāng)前頁(yè)時(shí)改變樣式
swichNav:function(e){
var cur=e.target.dataset.current;
console.log(cur);
if(this.data.currentTaB==cur){return false;}
else{
this.setData({
currentTab:cur
})
}
},
//判斷當(dāng)前滾動(dòng)超過(guò)一屏?xí)r，設(shè)置tab標(biāo)題滾動(dòng)條。
checkCor:function(){
if (this.data.currentTab>4){
this.setData({
scrollLeft:300
})
}else{
this.setData({
scrollLeft:0
})
}
},
pagechange: function (ee) {
let that=this;
console.log(ee.detail.source)
if ("touch" === ee.detail.source) {
let currentPageIndex = that.data.currentIndex;
currentPageIndex = (currentPageIndex+1) % 2;
that.setData({
currentIndex: currentPageIndex,
})
}
},
// 彈出、隱藏遮罩層
show_hideModal:function(){
let that=this;
that.setData({
hideModal:true
})
},
hideModal:function(){
let that=this;
that.setData({
hideModal:false
})
},
//
// 切換
// 切換swiper-item觸發(fā)bindchange事件
pagechange: function (e) {
// 通過(guò)touch判斷，改變tab的下標(biāo)值
if ("touch" === e.detail.source) {
let currentPageIndex = this.data.currentIndex;
currentPageIndex = (currentPageIndex + 1) % 2;
// 拿到當(dāng)前索引并動(dòng)態(tài)改變
this.setData({
currentIndex: currentPageIndex,
})
}
},
//點(diǎn)擊tab時(shí)觸發(fā)
titleClick: function (e) {
this.setData({
//拿到當(dāng)前索引并動(dòng)態(tài)改變
currentIndex: e.currentTarget.dataset.idx
})
},
onLoad: function (options) {
// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
var that = this;
// 高度自適應(yīng)
wx.getSystemInfo( {
success: function( res ) {
var clientHeight=res.windowHeight,
clientWidth=res.windowWidth,
rpxR=750/clientWidth;
var calc=clientHeight*rpxR-180;
console.log(calc)
that.setData( {
winHeight: calc
});
}
});
},
onReady: function () {
// 頁(yè)面渲染完成
},
onShow: function () {
// 頁(yè)面顯示
},
onHide: function () {
// 頁(yè)面隱藏
},
onUnload: function () {
// 頁(yè)面關(guān)閉
}
})
樣式修改為下方的即可
/* 頁(yè)面切換 */
Page {
/* 全局樣式 */
background: rgb(244, 245, 249);
height: 100%;
position: fixed;
}
.fontColorBox,
.fontColorBox1 {
/* 文字默認(rèn)顏色 */
color: black;
}
.navBox {
/* 頂部tab盒子樣式 */
width: 100%;
height: 80rpx;
background: white;
flex-direction: row;
display: flex;
align-items: center;
justify-content: center;
}
/* 最后一個(gè)tab標(biāo)題的樣式 */
/* .navBox view:last-child {
padding-left: 20%;
} */
.titleBox {
width: 100rpx;
/* 未選中文字的樣式 */
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 {
/* 底部?jī)?nèi)容樣式 */
height: 100vh;
overflow: scroll;
margin: 12rpx 0rpx;
background: white;
font-size: 28rpx;
}
/* 頁(yè)面切換 */
/* 遮罩層 */
/* pages/index/components/buy/index.wxss */
.flex {
display: flex;
align-items: center;
}
.box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
}
.empty-box {
flex: 1;
background-color: transparent;
}
/* 內(nèi)容視圖 */
.content {
width: 100vw;
background: rgba(255, 255, 255, 1);
opacity: 1;
border-radius: 20px 20px 0px 0px;
z-index: 1001;
}
/* modal按鈕 */
.button {
width: 100vw;
padding: 4rpx 20rpx 10rpx 40rpx;
}
.button >view {
width: calc(100% - 80rpx);
height: 98rpx;
border-radius: 50rpx;
line-height: 98rpx;
text-align: center;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: rgba(255, 255, 255, 1);
background: yellowgreen;
opacity: 1;
}
/* 內(nèi)部切換欄 */
.tab-h{
height: 80rpx;width: 100%; box-sizing: border-box;overflow: hidden;line-height: 80rpx;background: #F7F7F7; font-size: 16px; white-space: nowrap;position: fixed;top: 0; left: 0; z-index: 99;}
.tab-item{margin:0 36rpx;display: inline-block;}
.tab-item.active{color: #4675F9;position: relative;}
.tab-item.active:after{ content: "";display: block;height: 8rpx;width: 52rpx;background: #4675F9;position: absolute; bottom: 0;left: 5rpx;border-radius: 16rpx;}
.item-ans{ width: 100%;display: flex; flex-grow: row no-wrap;justify-content: space-between; padding: 30rpx;box-sizing: border-box; height: 180rpx;align-items: center;border-bottom: 1px solid #F2F2F2;}
.avatar{width: 100rpx;height: 100rpx;position: relative;padding-right: 30rpx;}
.avatar .img{width: 100%;height: 100%;}
.avatar .doyen{width: 40rpx;height: 40rpx;position: absolute;bottom: -2px;right: 20rpx;}
.expertInfo{font-size: 12px;flex-grow: 2;color: #B0B0B0;line-height: 1.5em;}
.expertInfo .name{font-size: 16px;color:#000;margin-bottom: 6px;}
.askBtn{ width: 120rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 14px; border-radius: 60rpx;border: 1px solid #4675F9; color:#4675F9;}
.tab-content{margin-top: 80rpx;}
.scoll-h{height: 100%;}
全部完整代碼
最后完整的代碼如下：
wxml
<!-- 切換 -->
<view>
<!-- Tab布局 -->
<view class='navBox'>
<view class='titleBox' bindtap='titleClick' data-idx='0' style="width: 200rpx;">
<text class="{{0 == currentIndex ? 'fontColorBox' : ''}}">安卓</text>
<hr class="{{0 == currentIndex ? 'lineBox' : 'notLineBox'}}" />
</view>
<view class='titleBox' bindtap='titleClick' data-idx='1' style="width: 200rpx;">
<text class="{{1 == currentIndex ? 'fontColorBox1' : ''}}">蘋(píng)果</text>
<hr class="{{1 == currentIndex ? 'lineBox' : 'notLineBox'}} " />
</view>
</view>
<!-- 內(nèi)容布局 -->
<swiper class='swiperTtemBox' bindchange='pagechange' current='{{currentIndex}}'>
<swiper-item class='swiperTtemBox'>
<!-- 安卓 -->
<view >
<scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
<view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">熱門(mén)</view>
<view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">影音</view>
<view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">閱讀</view>
<view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">游戲</view>
<view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">福利</view>
</scroll-view>
<swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab"
style="height:{{winHeight}}rpx">
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="https://profile.csdnimg.cn/9/B/A/0_qq_35230125"></image>
</view>
<view class="expertInfo">
<view class="name">剪影安卓版</view>
<view class="tag">111人下載</view>
<view>這只是一個(gè)簡(jiǎn)介，看的話點(diǎn)擊詳情最大</view>
</view>
<view class="askBtn" bindtap="show_hideModal">下載</view>
<!-- <navigator url="/pages/askExpert/expertDetail" class="askBtn">問(wèn)TA</navigator> -->
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
</view>
<view class="expertInfo">
<view class="name">歡顏</view>
<view class="tag">知名情感博主</view>
<view class="answerHistory">134個(gè)回答，2234人聽(tīng)過(guò) </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn">問(wèn)T2A</navigator>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
</view>
<view class="expertInfo">
<view class="name">歡顏</view>
<view class="tag">知名情感博主</view>
<view class="answerHistory">134個(gè)回答，2234人聽(tīng)過(guò) </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn">問(wèn)T2A</navigator>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
</view>
<view class="expertInfo">
<view class="name">歡顏</view>
<view class="tag">知名情感博主</view>
<view class="answerHistory">134個(gè)回答，2234人聽(tīng)過(guò) </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn">問(wèn)T2A</navigator>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view scroll-y="true" class="scoll-h" >
<view class="item-ans">
<view class="avatar">
<image class="img" src="http://ookzqad11.bkt.clouddn.com/avatar.png"></image>
</view>
<view class="expertInfo">
<view class="name">歡顏</view>
<view class="tag">知名情感博主</view>
<view class="answerHistory">134個(gè)回答，2234人聽(tīng)過(guò) </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn">問(wèn)T2A</navigator>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
<!-- 安卓 -->
</swiper-item>
<swiper-item class='swiperTtemBox'>
<view>活動(dòng)內(nèi)容</view>
</swiper-item>
</swiper>
</view>
<!-- 切換 -->
<!-- 彈窗 -->
<!--pages/index/components/buy/index.wxml-->
<view class="box" hidden="{{!hideModal}}">
<view class="empty-box" bindtap="hideModal" id="empty-box"></view>
<scroll-view scroll-y style="max-height:80vh;">
<view class="content" style="transform:translateY({{translateY}}px);" animation="{{animate}}">
<!-- boll -->
<view style="height: 750rpx;display: flex;flex-direction: column;align-items: center;">
<view style="height: 750rpx;width: 700rpx;display: flex;flex-direction: column;align-items: center;padding-top: 10rpx;">
<!-- 圖標(biāo)icon -->
<view style="width: 100rpx;height: 100rpx;border-radius: 10rpx;">
<image src="http://pic.2265.com/upload/2017-5/2017515111376293.png" style="width: 100rpx;height: 100rpx;"></image>
</view>
<view style="width: 730rpx;height: 500rpx;">
<text decode="{{true}}" style="width: 730rpx;height: 400rpx;"> 
    ???????????? ?????? 茫茫人海千千萬(wàn)萬(wàn)，感謝這一刻你看到了我的文章，感謝觀賞，大家好呀，歡迎加入人工智能交流群（看我的動(dòng)態(tài)），更多周邊福利等你????????歡迎訂閱本專欄或者關(guān)注我，大家一起努力每天一題算法題???????? 最后，希望我的這篇文章能對(duì)你的有所幫助！</text>
</view>
</view>
</view>
<!-- 按鈕 -->
<view class="button" bindtap="confirm">
<view>確認(rèn)</view>
</view>
</view>
</scroll-view>
</view>js
// pages/leftSlide/leftSlide.js
const App = getApp()
Page({
data: {
winHeight:"",//窗口高度
currentTab:0, //預(yù)設(shè)當(dāng)前項(xiàng)的值
scrollLeft:0, //tab標(biāo)題的滾動(dòng)條位置
currentIndex: 0, //默認(rèn)是活動(dòng)項(xiàng) 切換
hideModal:false//遮罩層
},
// 滾動(dòng)切換標(biāo)簽樣式
switchTab:function(e){
let that=this;
that.setData({
currentTab:e.detail.current
});
that.checkCor();
},
// 點(diǎn)擊標(biāo)題切換當(dāng)前頁(yè)時(shí)改變樣式
swichNav:function(e){
var cur=e.target.dataset.current;
console.log(cur);
if(this.data.currentTaB==cur){return false;}
else{
this.setData({
currentTab:cur
})
}
},
//判斷當(dāng)前滾動(dòng)超過(guò)一屏?xí)r，設(shè)置tab標(biāo)題滾動(dòng)條。
checkCor:function(){
if (this.data.currentTab>4){
this.setData({
scrollLeft:300
})
}else{
this.setData({
scrollLeft:0
})
}
},
pagechange: function (ee) {
let that=this;
console.log(ee.detail.source)
if ("touch" === ee.detail.source) {
let currentPageIndex = that.data.currentIndex;
currentPageIndex = (currentPageIndex+1) % 2;
that.setData({
currentIndex: currentPageIndex,
})
}
},
// 彈出、隱藏遮罩層
show_hideModal:function(){
let that=this;
that.setData({
hideModal:true
})
},
hideModal:function(){
let that=this;
that.setData({
hideModal:false
})
},
//
// 切換
// 切換swiper-item觸發(fā)bindchange事件
pagechange: function (e) {
// 通過(guò)touch判斷，改變tab的下標(biāo)值
if ("touch" === e.detail.source) {
let currentPageIndex = this.data.currentIndex;
currentPageIndex = (currentPageIndex + 1) % 2;
// 拿到當(dāng)前索引并動(dòng)態(tài)改變
this.setData({
currentIndex: currentPageIndex,
})
}
},
//點(diǎn)擊tab時(shí)觸發(fā)
titleClick: function (e) {
this.setData({
//拿到當(dāng)前索引并動(dòng)態(tài)改變
currentIndex: e.currentTarget.dataset.idx
})
},
onLoad: function (options) {
// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
var that = this;
// 高度自適應(yīng)
wx.getSystemInfo( {
success: function( res ) {
var clientHeight=res.windowHeight,
clientWidth=res.windowWidth,
rpxR=750/clientWidth;
var calc=clientHeight*rpxR-180;
console.log(calc)
that.setData( {
winHeight: calc
});
}
});
},
onReady: function () {
// 頁(yè)面渲染完成
},
onShow: function () {
// 頁(yè)面顯示
},
onHide: function () {
// 頁(yè)面隱藏
},
onUnload: function () {
// 頁(yè)面關(guān)閉
}
})
css
/* 頁(yè)面切換 */
Page {
/* 全局樣式 */
background: rgb(244, 245, 249);
height: 100%;
position: fixed;
}
.fontColorBox,
.fontColorBox1 {
/* 文字默認(rèn)顏色 */
color: black;
}
.navBox {
/* 頂部tab盒子樣式 */
width: 100%;
height: 80rpx;
background: white;
flex-direction: row;
display: flex;
align-items: center;
justify-content: center;
}
/* 最后一個(gè)tab標(biāo)題的樣式 */
/* .navBox view:last-child {
padding-left: 20%;
} */
.titleBox {
width: 100rpx;
/* 未選中文字的樣式 */
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 {
/* 底部?jī)?nèi)容樣式 */
height: 100vh;
overflow: scroll;
margin: 12rpx 0rpx;
background: white;
font-size: 28rpx;
}
/* 頁(yè)面切換 */
/* 遮罩層 */
/* pages/index/components/buy/index.wxss */
.flex {
display: flex;
align-items: center;
}
.box {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
}
.empty-box {
flex: 1;
background-color: transparent;
}
/* 內(nèi)容視圖 */
.content {
width: 100vw;
background: rgba(255, 255, 255, 1);
opacity: 1;
border-radius: 20px 20px 0px 0px;
z-index: 1001;
}
/* modal按鈕 */
.button {
width: 100vw;
padding: 4rpx 20rpx 10rpx 40rpx;
}
.button >view {
width: calc(100% - 80rpx);
height: 98rpx;
border-radius: 50rpx;
line-height: 98rpx;
text-align: center;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: rgba(255, 255, 255, 1);
background: yellowgreen;
opacity: 1;
}
/* 內(nèi)部切換欄 */
.tab-h{
height: 80rpx;width: 100%; box-sizing: border-box;overflow: hidden;line-height: 80rpx;background: #F7F7F7; font-size: 16px; white-space: nowrap;position: fixed;top: 0; left: 0; z-index: 99;}
.tab-item{margin:0 36rpx;display: inline-block;}
.tab-item.active{color: #4675F9;position: relative;}
.tab-item.active:after{ content: "";display: block;height: 8rpx;width: 52rpx;background: #4675F9;position: absolute; bottom: 0;left: 5rpx;border-radius: 16rpx;}
.item-ans{ width: 100%;display: flex; flex-grow: row no-wrap;justify-content: space-between; padding: 30rpx;box-sizing: border-box; height: 180rpx;align-items: center;border-bottom: 1px solid #F2F2F2;}
.avatar{width: 100rpx;height: 100rpx;position: relative;padding-right: 30rpx;}
.avatar .img{width: 100%;height: 100%;}
.avatar .doyen{width: 40rpx;height: 40rpx;position: absolute;bottom: -2px;right: 20rpx;}
.expertInfo{font-size: 12px;flex-grow: 2;color: #B0B0B0;line-height: 1.5em;}
.expertInfo .name{font-size: 16px;color:#000;margin-bottom: 6px;}
.askBtn{ width: 120rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 14px; border-radius: 60rpx;border: 1px solid #4675F9; color:#4675F9;}
.tab-content{margin-top: 80rpx;}
.scoll-h{height: 100%;}
以上就是小程序?qū)崿F(xiàn)頁(yè)面多級(jí)來(lái)回切換的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于小程序頁(yè)面切換的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
千分位數(shù)字格式化(用逗號(hào)隔開(kāi) 代碼已做了修改 支持0-9位逗號(hào)隔開(kāi))的JS代碼
這篇文章主要介紹了千分位數(shù)字格式化的JS代碼，有需要的朋友可以參考一下2013-12-12
這篇文章主要介紹了Javascript中的幾種URL編碼方法比較,本文對(duì)比了escape()、encodeURI()以及encodeURIComponent()這3種URL編碼方法,需要的朋友可以參考下2015-01-01
本文主要介紹了js實(shí)現(xiàn)交通燈效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
javaScript讓文本框內(nèi)的最后一個(gè)文字的后面獲得焦點(diǎn)實(shí)現(xiàn)代碼
讓文本框內(nèi)的最后一個(gè)文字的后面獲得焦點(diǎn)，在應(yīng)用中很常見(jiàn)，接下來(lái)提供解決方案，按興趣的朋友可以了解下2013-01-01
各種頁(yè)面定時(shí)跳轉(zhuǎn)(倒計(jì)時(shí)跳轉(zhuǎn))代碼總結(jié)
下面對(duì)實(shí)現(xiàn)頁(yè)面定時(shí)跳轉(zhuǎn)（也稱倒計(jì)時(shí)跳轉(zhuǎn)）做一下總結(jié)，以備不時(shí)之需，經(jīng)常使用的朋友可以參考下2013-10-10
本文主要介紹了uni-app組件的基本使用,包括組件的引入、使用和常見(jiàn)問(wèn)題解決方法,通過(guò)本文的學(xué)習(xí),讀者可以掌握uni-app組件的基本操作,為開(kāi)發(fā)uni-app應(yīng)用提供幫助,需要的朋友可以參考下2023-03-03
彈出層，并可以拖拽，好多人要，發(fā)出來(lái)共享一下 兼容IE6+, 各現(xiàn)代瀏覽器。2011-07-07
請(qǐng)注意，這里說(shuō)的是運(yùn)算數(shù)的求值順序。而非運(yùn)算符，運(yùn)算符的求值順序我們比較熟悉。2011-08-08
判斷文件類型控制表單提交這些都是在客戶端實(shí)現(xiàn)的，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-11-11
這篇文章主要幫助大家深入理解javascript模塊化，感興趣的小伙伴們可以參考一下2016-03-03