Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

翻页后点击详细页,返回时失效 #11

Closed
ALEXFUNGZH opened this issue Jul 11, 2017 · 7 comments
Closed

翻页后点击详细页,返回时失效 #11

ALEXFUNGZH opened this issue Jul 11, 2017 · 7 comments

Comments

@ALEXFUNGZH
Copy link

假如列表存在翻页,进入详细页返回时,列表只有第一页。

@lzxb
Copy link
Owner

lzxb commented Jul 11, 2017

只有第一页是啥意思?能上个截图么?

@ALEXFUNGZH
Copy link
Author

ALEXFUNGZH commented Jul 11, 2017

不好意思,可能表达不完整,我描述清晰一些。
1、设置每页10条数据;
2、浏览列表页时,假设我翻页浏览到第35条数据,然后点击查看详情;
3、从详情页返回列表页时,期望是回到刚刚浏览的位置(第35条);
4、但发现返回时却重新加载了页面,加载了第一页的列表;
请问有设置返回不刷新的方法吗?还是我用的不对?我用的代码是scroll-cnode这个例子
以下代码,我再List.vue的基础上改

  <!-- 设置指令监听全局滚动条 -->
  <div v-vuet-scroll.window="{ path: 'topic-list' }">
    <header>
      <ul>
        <li v-for="item in list.tabs">
          <router-link :to="{ name: 'topic-list', query: { tab: item.value } }">{{ item.label }}</router-link>
        </li>
      </ul>
    </header>
    <ul class="list" v-if="list.data.length">
      <li v-for="item in list.data">
          <router-link :to="{ name: 'topic-detail', params: { id: item.id } }">{{ item.title }}</router-link>
      </li> 
    </ul>
    <button @click="test">load</button>
  </div>
</template>
<script>
  import { mapRules, mapModules } from 'vuet'

  export default {
    mixins: [
      // 设置模块的更新规则
      mapRules({
        route: 'topic-list'
      }),
      // 连接模块的状态
      mapModules({
        list: 'topic-list'
      })
    ],
    methods:{
      test(){
        var listss = this.list;
        window.fetch(`https://cnodejs.org/api/v1/topics?mdrender=false&tab=all&limit=10`).then(function(response) {
            return response.json();
        }).then(function(json) {
            console.log(json);
            for (var i = 0; i < json.data.length; i++) {
              listss.data.push(json.data[i]);
            }
        });
      }
    }
  }
</script>
<style scoped>
  header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    border-bottom: 1px solid #ddd;
    background: #fff;
  }
  header ul {
    padding: 0;
    margin: 0;
    display: flex;
  }
  header ul li {
    flex: auto;
    list-style: none;
  }
  header ul li a {
    display: block;
    line-height: 50px;
    text-align: center;
  }
  .list {
    padding-top: 50px;
  }
</style>

@lzxb
Copy link
Owner

lzxb commented Jul 11, 2017

你代码有提交到github上面吗?我可以看得更全一下

@ALEXFUNGZH
Copy link
Author

不好意思,现在无法上传,我给个百度云的链接,下载运行可否?
链接:http://pan.baidu.com/s/1qXKU90C 密码:btfa

@lzxb
Copy link
Owner

lzxb commented Jul 11, 2017

你修改成这样试试

<button @click="$vuet.fetch('topic-list')">load</button>

另外,请求更新模块的数据,统一放到fetch方法中
可以参考此地址的代码

@ALEXFUNGZH
Copy link
Author

用这个方法,翻页如何传递参数呢?
另外,我打算和mint-ui搭配使用,主要是用下拉刷新,上拉加载更多。是否可以?

@lzxb
Copy link
Owner

lzxb commented Jul 11, 2017

翻页和vuet没有什么关系。肯定是可以 的

@lzxb lzxb closed this as completed Jul 11, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants