WeUI effect a rolling refresh

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/iChangebaobao/article/details/102743858

<link rel="stylesheet" href="css/jquery-weui.min.css">
<link rel="stylesheet" href="css/weui.min.css">
<script src="js/jquery-3.3.1.min.js"></script> 
<script src="js/jquery-weui.min.js"></script>

<style>
.weui-cells__title{
    width: 100%;
    text-align:center;margin:0 auto;
    height: 45px;
    line-height: 45px;
    padding: 0px;
    margin:0px;
} 
</style>
 
<div class="weui-flex flex" style="margin-bottom: 50px;margin-top: 10px;flex-wrap: wrap;" id="list">
   <div class="weui-flex__item pic" v-for="(g,index) in goodsList">
        <a href="#" class="link" @click="CarItemClick(g,index)">
            <img :src="g.url" width="150px" height="120px" style="border:1px solid #eee">
            <div class="icon-text">
                <div v-if="g.brand_name!=''">
                    {{g.brand_name}}/{{g.spu_name}}
                </div>
                <div v-else>
                    {{g.spu_name}}
                </div>
            </div>
            <div class="qx-desc">
                {{g.description}}
            </div>
            <div style="width:90%;margin:0 auto;height:20px">
                <span class="qx-price" style="width: 98%;">￥{{g.price}}</span>
            </div>
            <div style="width:90%;margin:0 auto;text-align: right;">
                <!-- <button class="buybtn">立即抢购</button> --> 
                <span class="qx-text" >点击查看</span>
            </div>
        </a>
    </div>
    <div class="weui-flex__item pic" style="border:none" v-if="goodsList.length%2!=0?true:false"></div>
</div> 

<div class="weui-loadmore" style="padding-bottom:30px;height:20px">
  <i class="weui-loading"></i>
    <span class="weui-loadmore__tips">正在加载</span>
</div>  

<script>
        var app = new Vue({
            el: '#app',
            data: {
                goodsList: [
                    // {
                    //     url: 'images/benz.png', brand_name: '宝能', good_name: '无水洗车喷雾', description: '不要1滴水，就洗1辆车；一喷一擦，洁净有闪亮;不要1滴水，就洗1辆车；一喷一擦，洁净有闪亮', price: '25'
                    // },
                    // {
                    //     url: 'images/benz.png', brand_name: '宝能', good_name: '无水洗车喷雾', description: '不要1滴水，就洗1辆车；一喷一擦，洁净有闪亮要1滴水，就洗1辆车；一喷一擦，洁净有闪亮', price: '25'
                    // }
                ],
                pages: 1,
                limits: 20,
                loading: false
            },
            created:function(){
                var that=this;
                window.onscroll = function () {
                    //变量scrollTop是滚动条滚动时，距离顶部的距离
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    //变量windowHeight是可视区的高度
                    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                    //变量scrollHeight是滚动条的总高度
                    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
                    //滚动条到底部的条件
                    if (scrollTop + windowHeight == scrollHeight) {
                        //写后台加载数据的函数
                        // console.log("距顶部" + scrollTop + "\n可视区高度" + windowHeight + "\n滚动条总高度" + scrollHeight);
                        if (that.loading) return;
                        that.loading = true;
                        that.pages++; //页数
                        $('.weui-loadmore').show();
                        setTimeout(function () {
                            that.loadlist();
                            that.loading = false;
                        }, 2500);   //模拟延迟

                    }
                }
            },
            mounted: function () {
                console.log("mount之后");
                this.loadlist(); 
            },
            updated: function () {
                console.log("更新之后");
            },
            methods: {
                loadlist: function () {
                    var html = "";
                    var that = this;
                    var a = {
                        page: that.pages,
                        limit: that.limits
                    }
                    console.log(JSON.stringify(a));
                    $.ajax({
                        type: "POST",
                        url: MALL_URL+"api/more/More_Optimization", //商品（全新）
                        data: JSON.stringify(a), 
                        success: function (res) {
                            console.log(res); 
                            if (res.code == 200 && res.data.length > 0) {
                                if (app.goodsList.length < 1) {
                                    app.goodsList = res.data
                                } else { 
                                    for(var j=0;j<res.data.length;j++){
                                        app.goodsList.push(res.data[j]);
                                        console.log(app.goodsList);
                                    }
                                }
                            } else {
                                html += "<div class=\"weui-cells__title\">已无更多数据</div>";
                                $("#list").append(html);
                                that.loading = true;
                            }
                            $(".weui-loadmore").hide();
                        },
                        error: function (request) {
                            $(".weui-loadmore").hide();
                            html += "<div class=\"weui-cells__title\" >已无更多数据</div>";
                            $("#list").append(html);
                        }
                    });
                }, 
                CarItemClick: function (item, index) {
                    console.log(item);
                    console.log(index);
                    localStorage.setItem('skuid', JSON.stringify(item.id));
                    window.location.href = "car_detailed.html";
                }
            }
        });
    </script>