構建頁面
在index.wxml
<!--index.wxml-->
<view class="index">
<view id="view1" class="view-item" bindtap="clickMe" data-name="按鈕1" data-age="35"> view1</view>
<view id="view2" class="view-item" bindtap="clickMe" data-name="按鈕2" data-age="44"> view2</view>
<view class="view-item">{{clickmsg}}</view>
</view>
index.wxss
.view-item {
text-align: center;
padding: 10px;
background-color: burlywood;
border-radius: 5px;
margin: 20px;
}
index.js
clickMe:function(e) {
// 通過dataset來將wxml中的數據給傳遞過來
console.log(e.currentTarget.dataset)
count++
this.data.clickmsg = '點擊了' + e.currentTarget.id + '當前已經點擊了' + count + '次'
// 必須要這樣寫才能更新數據
this.setData(this.data)
}
注意: 我們可以通過dataset來將wxml中的數據給傳遞過來,其中的age和name都是在wxml中設置的,命名規范必須是data-xxx,如果我們要取具體的某個值(例如name),可以使用
console.log(e.currentTarget.dataset.name):
頁面跳轉共有兩種方式
clickMe(e) {
wx.redirectTo({
url: '../home/home'
})
}
clickMe(e) {
wx.navigateTo({
url: '../home/home'
})
}
兩者的區別:
-
wx.navigateTo的執行:-
假使我們從A頁面跳轉到home頁面,再從home頁面跳轉到user,再從user頁面返回,日志打印如下:
image.png
-
home會依次執行onload---onshow---onready,當頁面從home跳轉到user時,會先調用home的onhide,然后加載user,執行onload---onshow---onready.當從user返回時,user頁面會銷毀,執行user的onUnload,然后home的頁面出現,執行home的onshow
-
wx.redirectTo:
image.png
與wx.navigateTo的區別在于,當從home跳轉到user時,會執行home的onUnload的方法,實際是home在跳轉時被銷毀了,"替換"成了user的頁面,當從user返回時,不再返回的是home頁面,而是原來home的上一級頁面.
tabbar之間的切換來實現跳轉
tabbar的切換與iOS的tabbar十分相似.假使home和user兩個page分別為tabbar的兩個模塊,且默認選中home,當小程序啟動后,我們從點擊user,再點擊home,可以看到如下日志:
小程序啟動后,會執行home的onLoad----onshow---onready函數,當我們點擊tabbar切換到user時,會先執行home的onhide,然后再執行user的onLoad----onshow---onready函數;當我們再次點擊tabbar切換home時,會執行user的onhide,再執行home的onshow.說明:此時頁面中home和user同時存在,點擊哪個顯示哪個執行onshow(當然是指不是第一次加載的情況),原先顯示的將執行onhide來隱藏自己.
在.wxml中實現頁面的跳轉
<navigator url="../user/user?name=dll" >
<button type="primary">導航組件跳轉到User</button>
</navigator>
如果是想通過redirect方式跳轉,只需要在navigate組件后聲明即可:
<navigator url="../user/user?name=dll" redirect >
<button type="primary">導航組件跳轉到User</button>
</navigator>
