yii2开发笔记---h5上拉加载数据，进入详情页点击返回上次进入详情的位置

其他框架和原生都适用

html代码：

<ul class="list">
    <?php if(!empty($model)){foreach ($model as $key) { ?>
        <li class="line">
            <a href="javascript:void(0)" onclick="myclick('/goods/details?id=<?php echo $key["id"]?>')">
            </a>
        </li>
    <?php }}else{echo '非常抱歉，暂时没有数据....';} ?>
</ul>
<div class="nodata" style="text-align:center"></div>

js：

<script>
    // 页数
    var page = 1;
    // 每页展示5个
    var size = 5;
    //滚动条到页面底部加载更多案例
    $(window).scroll(function () {
        var scrollTop = $(this).scrollTop();    //滚动条距离顶部的高度
        var scrollHeight = $(document).height();   //当前页面的总高度
        var clientHeight = $(this).height();    //当前可视的页面高度
        // console.log("top:"+scrollTop+",doc:"+scrollHeight+",client:"+clientHeight);
        if (scrollTop + clientHeight >= scrollHeight) {   //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
                //滚动条到达底部
            $(".nodata").show().html("加载中...");
            page++;
            $.getJSON("/goods/load", {page: page, size: size}, function (data) {
                json = data.data;
                if (json) {
                    var str = "";
                    //var arr = "";
                    $.each(json, function (what, array) {
                        str = "<li class=\"line\">\n" +
                            "<a href=\"javascript:void(0)\" onclick=\"myclick(\'/goods/details?id="+array['id'] +"\')\">" +
                            "</a>\n" +
                            "</li>";

                        $(".list").append(str);
                    });
                } else {

                    $(".nodata").show().html("已经到底了...");
                    return false;
                }
            });
        }
    });
</script>
<script>
    function myclick(url){
        sessionStorage.setItem('index_list',$(".list").html());//存储列表数据
        sessionStorage.setItem('index_page',page);//存储页码
        sessionStorage.setItem('index_scroll',$(window).scrollTop());//存储滚动条位置
        window.location.href = url;
        return false;
    }
</script>
<script>
    var l = sessionStorage.getItem('index_list');
    if(null !== l && '' !== l){
        // 恢复数据
        $(".list").html(l);
        $(window).scrollTop(sessionStorage.getItem('index_scroll'));
        page = sessionStorage.getItem('index_page');

        //删除缓存
        sessionStorage.removeItem('index_list');
        sessionStorage.removeItem('index_page');
        sessionStorage.removeItem('index_scroll');
    }
    // else{
    //     p = {$data|json_encode}
    //     showData();
    //  }
</script>

控制器代码：

public function actionGoodslist(){
        $model = new GoodsModel();
        $model = $model->search();//print_r($model);exit;
        return $this->renderPartial('goods_list',[
            'model' => $model,
        ]);
    }
    public function actionLoad()
    {
        $params = Yii::$app->request->get();
        $page = $params['page'];  //获取请求的页数
        $pagenum = $params['size'];; //每页数量
        $start = ($page - 1) * $pagenum;
        $sql = "SELECT * FROM tre_tbkcoupon WHERE title like '%女装%' ORDER BY id DESC LIMIT $start," . $pagenum . "";
        $model = Yii::$app->getDb()->createCommand($sql)->queryAll();
        $data = ['data' => $model];
        return json_encode($data);
    }

actionLoad()里 teturn json_encode($data);的数据格式是这样的

{"data":[
    {"id":"3103","title":"11\u4e2d","coupon_info":"1","post_price":1.75},
    {"id":"3063","title":"\u7ae5\u978b","coupon_info":"20","post_price":39},
    {"id":"3060","title":"2018\u79cb","coupon_info":"2","post_price":27},
    {"id":"2861","title":"\u674e\u5b81","coupon_info":"20","post_price":169},
    {"id":"2854","title":"ins\u8d85","coupon_info":"5","post_price":34.9}
]}

模型代码：

public function search(){
        $sql = "SELECT * FROM tre_tbkcoupon WHERE title like '%女装%' ORDER BY id DESC limit 5";
        $query = Yii::$app->getDb()->createCommand($sql)->queryAll();
        
        return $query;
    }

yii2开发笔记---h5上拉加载数据，进入详情页点击返回上次进入详情的位置

猜你喜欢