GithubHelp home page GithubHelp logo

Comments (7)

lzxb avatar lzxb commented on May 27, 2024

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

from vuet.

ALEXFUNGZH avatar ALEXFUNGZH commented on May 27, 2024

不好意思,可能表达不完整,我描述清晰一些。
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>

from vuet.

lzxb avatar lzxb commented on May 27, 2024

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

from vuet.

ALEXFUNGZH avatar ALEXFUNGZH commented on May 27, 2024

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

from vuet.

lzxb avatar lzxb commented on May 27, 2024

你修改成这样试试

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

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

from vuet.

ALEXFUNGZH avatar ALEXFUNGZH commented on May 27, 2024

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

from vuet.

lzxb avatar lzxb commented on May 27, 2024

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

from vuet.

Related Issues (14)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.