작은 프로그램의 페이지 이동 방식 총결산
1. 구성 요소 라벨을 사용하여 실현한다.
특징: 누르면 누르는 효과
2. 페이지 레이아웃에 감청 시간bindtap 이벤트를 추가합니다.그리고 방법 안에 있어요.wx를 통해.navigatorTo가 점프를 실현합니다.
특징: 누르지 않는 효과.
gotoPage: function () {
wx.navigateTo({
url: '../list/list',
success: function (res) {
// success
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
3. wx를 통해.redirectTo는 점프를 실현합니다.
특징: 현재 페이지를 닫고 응용 프로그램의 페이지로 이동
toList: function (event) {
var provinceName = event.currentTarget.id;
wx.redirectTo({
url: '../city/city?province='+provinceName,
success: function (res) {
// success
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
}
4. wx.navigateBack 방법
현재 페이지를 닫습니다.이전 페이지 또는 다중 레벨 페이지로 돌아가기
wx.navigateBack({
delta: 1, // delta( 1)
success: function (res) {
// success
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
이전 페이지에 값 지정
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2];// 。
prevPage.setData({
bank_cn: bank_cn,
bank: bank
})
중점:
tabBar
에서는 일반적으로 네 개의 메인 화면이 있는데 이런 메인 화면 사이의 전환은tab 전환과 같다. 이 몇 개의 페이지는 tabBar
에서 따로 설정해야 한다. 일반 페이지가 이 네 개의 메인 화면으로 전환할 때 사용할 수 없다navigator
, 사용해야 한다switchTab
.실례: 첫 페이지에서tabBar 페이지로 이동하고 파라미터를 가져가야 합니다.우선 나는 이렇게 했다.
인덱스에서js:
toCategory:function(event){
var cate_id = event.currentTarget.dataset.cate_id;
wx.switchTab({
url: '../category/category?cate_id='+cate_id,
});
},
위에 적힌 대로category에 있습니다.js에서 데이터를 얻지 못함;
onLoad:function(options){
console.log(options);
}
그리고 공식 문서를 살펴봤습니다.
wx.switchTab(OBJECT)
tabBar 페이지로 이동하고 다른 모든 비tabBar 페이지를 닫습니다
OBJECT 매개변수 설명:
매개 변수
유형
필수
설명
url
String
예.
점프가 필요한tabBar 페이지의 경로 (app.json의tabBar 필드에 정의된 페이지) 는 경로 뒤에 파라미터가 있을 수 없습니다
success
Function
아니오
인터페이스 호출 성공 리셋 함수
fail
Function
아니오
인터페이스 호출 실패한 리셋 함수
complete
Function
아니오
인터페이스 호출이 끝난 리셋 함수 (호출 성공, 실패 모두 실행)
URL 경로를 볼 수 있고 매개 변수를 가져올 수 없습니다.이제 어색해.나는 반드시 파라미터를 가지고 가야 업무의 수요를 만족시킬 수 있기 때문이다.지름길을 걸었다.사고방식: 점프할 때 전역 변수에 변수cate_ 설정id,category로 이동합니다.js 중후.전역 변수의cate_ 가져오기id, 다 쓴 후에 변수를 제거합니다.구현은 다음과 같습니다.
홈페이지 index.js:
toCategory:function(event){
var cate_id = event.currentTarget.dataset.cate_id;
app.globalData.cate_id=cate_id;// (app var app=getApp())
wx.switchTab({
url: '../category/category'
});
},
분류 페이지 카테고리.js:
onLoad:function(options){
var that = this
var cate_id=app.globalData.cate_id
wx.request({
url: app.globalData.httpsurl +'public/index.php?s=product/index',
data:{
cate_id:cate_id,
},
success:function(res){
// cate_id
app.globalData.cate_id=""
that.setData({
alldata:res.data,
})
}
})
},
위의 전환은 업무 논리의 수요를 완성할 수 있다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.