最近在開發(fā)個(gè)人的一個(gè)小項(xiàng)目的時(shí)候遇到一個(gè)問題遗淳，原因是有一個(gè)列表，在點(diǎn)擊某一項(xiàng)的時(shí)候要跳轉(zhuǎn)到詳情心傀，這個(gè)詳情是一個(gè)外部鏈接屈暗，并不是內(nèi)部的
查了一下uni-app的文檔，嗯剧包，很好恐锦，果然很順利的找到了web-view組件，然后很天真的直接把web-web放到列表中
<template>
<view class="history">
<view class="list">
<view
class="item"
v-for="(item, index) in list"
:key="index"
@click="itemClick(item)"
>
<view class="date">
{{item.title}}
</view>
</view>
</view>
<!--web-viwe的位置-->
<web-view :src="url" v-if="url.length"></web-view>
</view>
</template>
點(diǎn)擊列表的某一項(xiàng)疆液，打開了外部鏈接是這樣子的
打開外部的鏈接
乍一看一铅，好像沒什么問題，但是６橛汀潘飘！嗯，我看完了掉缺，我怎么返回列表安仿肌！？裘鳌艰毒！（此時(shí)心態(tài)發(fā)生了一些變動(dòng)，嗯搜囱，看看文檔丑瞧，哇！蜀肘！文檔也沒說０硇凇！只有一些回調(diào)函數(shù)０绯琛西乖！難道我要在回調(diào)函數(shù)里面給他加一個(gè)返回按鈕嗎？坛增？获雕？這也太蠢了吧！轿偎！
弄了快10分鐘典鸡，突然！想到我好像可以定義一個(gè)內(nèi)部頁面坏晦，然后就只放一個(gè)web-view萝玷，然后在列表點(diǎn)擊的時(shí)候嫁乘，跳轉(zhuǎn)到該內(nèi)部頁面，并且把需要打開的鏈接傳遞到該頁面不就可以了嗎Ｇ虻铩ｒ迅！而且別的列表也要用到外部鏈接也可以調(diào)用該頁面睁冬，復(fù)用性也有了挎春！嗯，說干就干
<template>
<view class="history">
<view class="list">
<view
class="item"
v-for="(item, index) in list"
:key="index"
@click="itemClick(item)"
>
<view class="date">
{{item.title}}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: []
}
},
methods: {
itemClick (data) {
// 跳轉(zhuǎn)到內(nèi)部窗口并且傳遞鏈接
uni.navigateTo({
url: `/pages/webview/webview?url=${data.link}`
})
}
},
created() {
//異步獲取數(shù)據(jù)啦豆拨，沒什么好說的
}
}
</script>
webview內(nèi)部頁面
<template>
<view>
<web-view :src="url"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url: ''
}
},
onLoad(e) {
// 獲取傳遞過來的鏈接
this.url = e.url
}
}
</script>
最終效果
有返回按鈕啦直奋！
