未验证 提交 252c0167 编写于 作者: hbcui1984's avatar hbcui1984 提交者: GitHub

Update adapt.md

上级 a86977dd
...@@ -86,6 +86,8 @@ rightWindow对应的页面不需要重写一遍新闻详情的页面逻辑,只 ...@@ -86,6 +86,8 @@ rightWindow对应的页面不需要重写一遍新闻详情的页面逻辑,只
<!--responsive/right-window.vue--> <!--responsive/right-window.vue-->
<template> <template>
<view> <view>
<!-- 这里将 /pages/detail/detail.nvue 页面作为一个组件使用 -->
<!-- 路径 “/pages/detail/detail” 转为 “pages-detail-detail” 组件 -->
<pages-detail-detail ref="detailPage"></pages-detail-detail> <pages-detail-detail ref="detailPage"></pages-detail-detail>
</view> </view>
</template> </template>
...@@ -93,7 +95,9 @@ rightWindow对应的页面不需要重写一遍新闻详情的页面逻辑,只 ...@@ -93,7 +95,9 @@ rightWindow对应的页面不需要重写一遍新闻详情的页面逻辑,只
<script> <script>
export default { export default {
created(e) { created(e) {
//监听自定义事件,该事件由详情页列表的点击触发
uni.$on('updateDetail', (e) => { uni.$on('updateDetail', (e) => {
// 执行 detailPage组件,即:/pages/detail/detail.nvue 页面的load方法
this.$refs.detailPage.load(e.detail); this.$refs.detailPage.load(e.detail);
}) })
}, },
...@@ -104,14 +108,15 @@ rightWindow对应的页面不需要重写一遍新闻详情的页面逻辑,只 ...@@ -104,14 +108,15 @@ rightWindow对应的页面不需要重写一遍新闻详情的页面逻辑,只
``` ```
然后在新闻列表页面,处理点击列表后与rightWindow交互通信的逻辑。 然后在新闻列表页面,处理点击列表后与rightWindow交互通信的逻辑。
```js ```js
// pages/news/news-page.nvue // pages/news/news-page.nvue
goDetail(detail) { goDetail(detail) {
if (this._isWidescreen) { //宽屏时与rightWindow通信 if (this._isWidescreen) { //若为宽屏,则触发右侧详情页的自定义事件,通知右侧窗体刷新新闻详情
uni.$emit('updateDetail', { uni.$emit('updateDetail', {
detail: encodeURIComponent(JSON.stringify(detail)) detail: encodeURIComponent(JSON.stringify(detail))
}) })
} else { // 窄屏时继续跳转新窗体,在新窗体打开详情页面 } else { // 若为窄评,则打开新窗体,在新窗体打开详情页面
uni.navigateTo({ uni.navigateTo({
url: '/pages/detail/detail?query=' + encodeURIComponent(JSON.stringify(detail)) url: '/pages/detail/detail?query=' + encodeURIComponent(JSON.stringify(detail))
}); });
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册