Vue(小案例_vue+axios仿手机app)_图文列表实现

一、前言                                                                                     

                                      1、导航滑动实现

                                      2、渲染列表信息时让一开始加载的时候就请求数据

                                      3、根据路由的改变，加载图文的改变(实现用户访问网站时可能执行的三个操作)

二、主要内容                                                                              

1、导航滑动实现：

　　（1）演示效果：

    

　　（2）代码实现

<!--导航栏用ul li实现-->
            <ul>
                <li v-for='(item,index) in categoryList' :key='index'>
                    <a href="javascript:;">{{item.title}}</a>
                </li>
               
            </ul>
        </div>


<style>

li {
    list-style: none;
    display: inline-block;
    margin-left: 10px;
    height: 30px;
}

 ul {
    /*强制不换行*/
    white-space: nowrap;
    overflow-x: auto;
    padding-left: 0px;
    margin: 5;
}

</style>

 

2、渲染列表信息时让一开始加载的时候就请求数据

　　（1）在methods里面封装一个请求的方法

 export default{
        name:'PhotoList',
        data(){
            return{
                categoryList,
                title_h:'图文分享'
            }
        },

        methods:{
            loadImageByCategoryId(id){ //这里传入请求的id
                this.$axios.get('api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d'+id)
                .then(res=>{
                     console.log(res.data.result.data)
                })
                .catch(err=>{
                    console.log('数据获取失败',err);
                })
            }

        }
    }

　　（2）在created()中最开始就调用这个方法

        created(){
       
             this.loadImageByCategoryId(0);//0表示所有的数据
             
             this.$axios.get('api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d')
            .then(res=>{
                
                console.log(res.data.result.data)
            })
            .catch(err=>{
                console.log('新闻数据获取失败',err)
            })
        }

　　（3）当图片过多的时候需要设置图片懒加载（n+1）模式，这里用mint-ui里面的v-lazy

//Mint-ui里面的图片懒加载
<img v-lazy='item.img_url'>

 

 

 

3、根据路由的改变，加载图文的改变（牵涉到动态路由的匹配：https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#响应路由参数的变化）

　　官网上明确告诉我们：当路由从/user/foo 导航到 /user/bar, 原来的组件实例会被复用。因为两个路由都渲染同一个组件，比起销毁再创建，复用显得更加高效。不过，这意味着组件的生命周期钩子不会再被调用。复用组件时，如果想对不同的路由参数做出不同的响应的时候，此时可以用1）watch监听  2）使用beforeRouteUpdate导航守卫

 

操作一：在当前网站中，直接在url输入动态路由

　（1）下面用beforeRouteUpdate(to, from, next){ }来实现

 methods:{
            loadImageByCategoryId(id){ //这里传入请求的id
                this.$axios.get('api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d')
                .then(res=>{
                     console.log(res.data.result.data)
                })
                .catch(err=>{
                    console.log('数据获取失败',err);
                })
            }

        },

        created(){
            //api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d
             this.loadImageByCategoryId(0);//0表示所有的数据

             this.$axios.get('api/index?type=top&key=79b64827a7a0f95504dfb2f7e903208d')
            .then(res=>{
                
                console.log(res.data.result.data)
            })
            .catch(err=>{
                console.log('新闻数据获取失败',err)
            })
        },

        beforeRouteUpdate(to, from, next){
            //在当前路由改变，但是该组价被复用时调用
            //举例来说，对于一个带有动态参数的路径/foo/:id 在/foo/1 和 /foo/2之间跳转的时候
            //由于会渲染同样的Foo组件，因此组件实例会被复用。这个钩子在这个时候就会被调用
            console.log(to);//to是目的
            this.loadImageByCategoryId(to.params.categoryId); //拿到里面的路由参数调用上面封装的请求方法，就会根据不同的参数请求到不同类型的数据
        }
    }

 

 

操作二：很多时候通过点击上面的滑动导航改变路由

　　（1）给每个导航li标签注册点击事件，然后将当前的id传进去

 

<div class="photo-header">
            <ul>
                <li v-for='(category,index) in categoryList' :key='index' @click='categoryHandler(category.id)'>
                    <router-link :to="category.routerName" exact @click.native ='changeHash()'>{{item.title}}</router-link>

                </li>
               
            </ul>
        </div>

 

　　（2）在method中定义这个categoryHandler点击事件，

 categoryHandler(id){
            this.$router.push({name:'photo.list'}, params:{categoryId:id})  //当用户点击之后就会跳转到这个路由，然后再执行beforeRouterUpdate方法

           },

　　（3）执行beforeRouteUpdate方法，重新根据不同路由参数请求数据

beforeRouteUpdate(to, from, next){
            //在当前路由改变，但是该组价被复用时调用
            //举例来说，对于一个带有动态参数的路径/foo/:id 在/foo/1 和 /foo/2之间跳转的时候
            //由于会渲染同样的Foo组件，因此组件实例会被复用。这个钩子在这个时候就会被调用
            console.log(to);//to是目的
            this.loadImageByCategoryId(to.params.categoryId); //拿到里面的路由参数调用上面封装的请求方法，就会根据不同的数据请求到不同类型的数据
        }

 

操作三：用户可能关闭了当前的网站，然后从浏览器另一个网页中直接拿这个路由来刷新（这个时候路由没有更新）

　　（1）用beforeRouteEnter

 beforeRouteEnter(to, from, next){
            //在渲染该组件的对应路由被confirm前调用
            //不能获取组件实例this
            //因为当守卫执行前，组件实例还没有被创建
            next(vm =>{
                vm.loadImageByCategoryId(to.params.categoryId)

            })
        },

 

 

结合以上三个操作就可以实现，通过点击不同导航li标签，渲染不同类型的数据， 可以通过在当前网站上输入不同的动态路由参数，渲染不同的数据，还可以从别的网站进来，渲染不同的数据

 

三、总结                                                                                     

 

结合以上三个操作就可以实现，通过点击不同导航li标签，渲染不同类型的数据， 可以通过在当前网站上输入不同的动态路由参数，渲染不同的数据，还可以从别的网站进来，渲染不同的数据