[VUE2]二十四、【案例】使用网络请求实现列表翻页效果

2024 年 03 月 13 日

45 次浏览

1936字数

改装了第二十二篇axios笔记中的代码，实现点击按钮翻译效果，代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{ background-color: #f4f4f4;}
        *{padding: 0;margin: 0; list-style: none;}
        li{ width:200px;border:1px solid #efefef; background:#fff; margin:10px;}
        li img {width:100% }
        li h3{ font-size:20px; font-weight:400 }
    </style>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{childid}}</h1>
        <button @click="last">上一页</button>
        <button @click="next">下一页</button>
        <ul>
            <li v-for="item in listArr">
                <img :src="item.good_main_img" alt="">
                <h3>{{item.good_name}}</h3>
            </li>
        </ul>
    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
            childid:10000, // 初始页码
            listArr:[]
        },
        methods:{
            last(){  // 上一页点击事件
                if(this.childid>10000){
                   this.childid-- // 点击上一页页面减一
                   this.getData()
                }
            },
            next(){  // 下一页点击事件
                if(this.childid<=10006){
                    this.childid++ //点击下一页页码加一
                    this.getData()
                }
            },
            getData(){  //封装请求函数，提高代码复用性
                axios({  // 发起网络请求至后台
                url:"http://10.24.70.16:8000/app/goodslist/",
                method:"get",  // get请求类型
                params:{ // 携带参数
                    format:"json",
                    childid:this.childid  // 携带页数参数去访问
                }
            }).then(res=>{  //.then为回调函数，使用箭头函数代替传统函数
                this.listArr = res.data  
                    console.log(res);
                })  
            }

    
        },
        created(){
            this.getData()
        },
    })
</script>

测试页面:
首次页面渲染完成

点击下一页进行翻页：

可以看到成功实现点击下一页按钮触发axios方法重新获取新数据，然后渲染页面。