小程序?qū)崿F(xiàn)頁面多級(jí)來回切換的示例代碼
更新時(shí)間：2022年07月07日 08:54:42 作者：德宏大魔王
這篇文章主要為大家詳細(xì)介紹了小程序如何頁面多級(jí)來回切換支持滑動(dòng)和點(diǎn)擊操作，文中的實(shí)現(xiàn)步驟講解詳細(xì)，快跟隨小編一起動(dòng)手嘗試一下吧
第一步
首先通過swiper創(chuàng)建一個(gè)簡(jiǎn)單的多tab頁面
通過觸發(fā)pagechange1方法中的事件對(duì)currentIndex來進(jìn)行賦值，又通過currentIndex的改變使前端wxml對(duì)應(yīng)更改，這個(gè)部分對(duì)滑動(dòng)和點(diǎn)擊的操作都一樣，無非就是使currentIndex對(duì)應(yīng)到各自的位置，通過數(shù)字來決定位置
//滑動(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' : ''}}">蘋果</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í)頁面再加一個(gè)滑動(dòng)頁面，當(dāng)內(nèi)切換結(jié)束后，在做切換就是父級(jí)的切換操作
在“內(nèi)容1”的view中 寫入代碼即可，由于父級(jí)代碼只能是小于2個(gè)頁面才有效，所以我們不用父級(jí)的這個(gè)滑動(dòng)來做子滑動(dòng)，不僅僅是因?yàn)閎ug的問題，這樣也避免了樣式和數(shù)據(jù)重復(fù)的問題
在這里我們插入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">熱門</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">問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人聽過 </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn">問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人聽過 </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn">問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人聽過 </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn">問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人聽過 </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn">問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)前頁時(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)超過一屏?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) {
// 通過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) {
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(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 () {
// 頁面渲染完成
},
onShow: function () {
// 頁面顯示
},
onHide: function () {
// 頁面隱藏
},
onUnload: function () {
// 頁面關(guān)閉
}
})
樣式修改為下方的即可
/* 頁面切換 */
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;
}
/* 頁面切換 */
/* 遮罩層 */
/* 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' : ''}}">蘋果</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">熱門</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">問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人聽過 </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn">問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人聽過 </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn">問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人聽過 </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn">問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人聽過 </view>
</view>
<navigator url="/pages/askExpert/expertDetail" class="askBtn">問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;"> 
    ???????????? ?????? 茫茫人海千千萬萬，感謝這一刻你看到了我的文章，感謝觀賞，大家好呀，歡迎加入人工智能交流群（看我的動(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)前頁時(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)超過一屏?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) {
// 通過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) {
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(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 () {
// 頁面渲染完成
},
onShow: function () {
// 頁面顯示
},
onHide: function () {
// 頁面隱藏
},
onUnload: function () {
// 頁面關(guān)閉
}
})
css
/* 頁面切換 */
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;
}
/* 頁面切換 */
/* 遮罩層 */
/* 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)頁面多級(jí)來回切換的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于小程序頁面切換的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
javascript 判斷字符串是否包含某字符串及indexOf使用示例
js javascript 判斷字符串是否包含某字符串,String對(duì)象中查找子字符及indexOf具體使用，感興趣的朋友可以參考下2013-10-10
讓iframe框架網(wǎng)頁在任何瀏覽器下自動(dòng)伸縮
很多朋友都在使用iframe中遇到過不能自動(dòng)隨頁面伸縮，特別是動(dòng)態(tài)讀取頁面的時(shí)候，會(huì)出現(xiàn)滾動(dòng)條，影響美觀，今天研究一下了，發(fā)現(xiàn)了一個(gè)簡(jiǎn)單解決的辦法，可以在IE，F(xiàn)IREFOX，OPERA下使用2006-08-08![[js+css]點(diǎn)擊隱藏層,點(diǎn)擊另外層不能隱藏原層](http://img.jbzj.com/images/xgimg/bcimg2.png)
[js+css]點(diǎn)擊隱藏層,點(diǎn)擊另外層不能隱藏原層
[js+css]點(diǎn)擊隱藏層,點(diǎn)擊另外層不能隱藏原層...2007-03-03
JavaScript中break、continue和return的用法區(qū)別實(shí)例分析
這篇文章主要介紹了JavaScript中break、continue和return的用法區(qū)別,結(jié)合實(shí)例形式詳細(xì)對(duì)比分析了JavaScript中break、continue和return的基本功能、使用方法、區(qū)別與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
JS實(shí)現(xiàn)table表格數(shù)據(jù)排序功能(可支持動(dòng)態(tài)數(shù)據(jù)+分頁效果)
這篇文章主要介紹了JS實(shí)現(xiàn)table表格數(shù)據(jù)排序功能(可支持動(dòng)態(tài)數(shù)據(jù)+分頁效果) 的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友一起看看吧2016-05-05
js綁定事件this指向發(fā)生改變的問題將在本文進(jìn)行詳細(xì)探討下，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-04-04
JavaScript Ajax實(shí)現(xiàn)異步通信
這篇文章主要為大家詳細(xì)介紹了JavaScript Ajax實(shí)現(xiàn)異步通信的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
微信小程序最難實(shí)現(xiàn)的公共業(yè)務(wù)是什么？應(yīng)該是表單校驗(yàn)，這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)表單校驗(yàn)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
js中document.write和document.writeln的區(qū)別
這篇文章主要介紹了js中document.write和document.writeln的區(qū)別,需要的朋友可以參考下2018-03-03
關(guān)于Javascript模塊化和命名空間管理的問題說明
最近閑下來的時(shí)候，稍微想了想這個(gè)問題。關(guān)于Javascript模塊化和命名空間管理2010-12-12