微信小程序通過URL傳值wx:if的注意點
在寫微信小程序的時候有些頁面大致相同,無非就是多個狀態讓控件可以編輯隱藏等等,所以頁面複用顯得方便很多。而且URL傳值作爲最簡單的傳值方法,兩者相互配合能夠完成需求那簡直完美
比如有個審覈加查看詳情的頁面,平時查看的時候不需要審覈按鈕,審覈的時候才讓底部的按鈕顯示出來
父頁面跳轉
wx.navigateTo({
url: '../checkPage?isCheck=false&checkId=' +
event.currentTarget.dataset.index
})
二級頁面wx:if
判斷是否顯示審覈按鈕,根據微信官方文檔的建議,這裏使用了block
block wx:if
因爲wx:if
是一個控制屬性,需要將它添加到一個標籤上。如果要一次性判斷多個組件標籤,可以使用一個<block/>
標籤將多個組件包裝起來,並在上邊使用wx:if
控制屬性
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
注意: <block/>
並不是一個組件,它僅僅是一個包裝元素,不會在頁面中做任何渲染,只接受控制屬性
代碼實現:
<block wx:if="{{isCheck}}">
<view class="verify">
<view class="agree" bindtap="verify" data-index="0">同意</view>
<view class="refuse" bindtap="verify" data-index="1">拒絕</view>
</view>
</block>
onLoad: function(options) {
this.setData({
isCheck: options.isCheck,
})
},
這裏就會碰到一個問題,就是onLoad
取值始終是沒有問題的,但是wx:if
裏的判斷一直爲真,細心的小夥伴可能發現了,跳轉的時候URL經過了URLEncode
編碼,所以二級頁面取到的true
和false
都是字符串,而wx:if=’{{flag}}‘
的flag
只要不是’’
、null
和undefined
,都是爲真,這樣審覈按鈕不管是true
還是false
就一直顯示了。所以正確的寫法應該是下面的這種:
<block wx:if="{{isCheck == 'true'}}">
<view class="verify">
<view class="agree" bindtap="verify" data-index="0">同意</view>
<view class="refuse" bindtap="verify" data-index="1">拒絕</view>
</view>
</block>