master

分支 (1)

管理

管理

master

ShopTemplate
/
GoodLists3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.css">
    <link rel="stylesheet" href="css/shop.css">
    <!-- 依赖库 axios/vue/vue-router -->
    <script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue@2.2.6/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router@2.2.1/dist/vue-router.min.js"></script>
    <!-- vonic 核心文件 -->
    <script src="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.js"></script>
    <script src="js/vue-shop.js"></script>
</head>
<body>
<div id="myapp" class="page has-navbar">
    <von-header theme="light">
        <span slot="title">产品列表</span>
    </von-header>
    <scroll class="page-content" :on-refresh="onRefresh"
              :on-infinite="onInfinite"
              style="padding-top: 44px;">
        <small-card :list="goodslist" :on-open="openpage" img-position="right"></small-card>
        <div v-if="infiniteCount >= 3" slot="infinite" class="text-center">没有更多数据</div>
    </scroll>
</div>
<script>
    var _goodsList=[
        {"id":973,"tag":['简单','美观','包邮'],"thumb":"images/goods.jpg","name":"北欧丝绒收纳袋束口袋 抽绳衣物收纳包 旅行内衣整理袋小布袋60g","price":"28.00","market_price":"30.00","sale":1505,},
        {"id":972,"tag":['简单','美观','包邮'],"thumb":"","name":"北欧丝绒收纳袋束口袋 抽绳衣物收纳包 旅行内衣整理袋小布袋60g","price":"28.00","market_price":"30.00","sale":1505,},
        {"id":90,"tag":['简单','美观','包邮'],"thumb":"images/goods.jpg","name":"北欧丝绒收纳袋束口袋 抽绳衣物收纳包 旅行内衣整理袋小布袋60g","price":"28.00","market_price":"30.00","sale":1505,},
        {"id":97,"tag":['简单','美观','包邮'],"thumb":"images/goods.jpg","name":"北欧丝绒收纳袋束口袋 抽绳衣物收纳包 旅行内衣整理袋小布袋60g","price":"28.00","market_price":"30.00","sale":1505,},
        {"id":93,"tag":['简单','美观','包邮'],"thumb":"","name":"北欧丝绒收纳袋束口袋 抽绳衣物收纳包 旅行内衣整理袋小布袋60g","price":"28.00","market_price":"30.00","sale":1505,},
        {"id":73,"tag":['简单','美观','包邮'],"thumb":"images/goods.jpg","name":"北欧丝绒收纳袋束口袋 抽绳衣物收纳包 旅行内衣整理袋小布袋60g","price":"28.00","market_price":"30.00","sale":1505,},
        {"id":3,"tag":['简单','美观','包邮'],"thumb":"images/goods.jpg","name":"北欧丝绒收纳袋束口袋 抽绳衣物收纳包 旅行内衣整理袋小布袋60g","price":"28.00","market_price":"30.00","sale":1505,},
        {"id":9,"tag":['简单','美观','包邮'],"thumb":"images/goods.jpg","name":"北欧丝绒收纳袋束口袋 抽绳衣物收纳包 旅行内衣整理袋小布袋60g","price":"28.00","market_price":"30.00","sale":1505,},
    ];
    var vm = new Vue({
        el:'#myapp',
        data(){
            return{
                items:[],
                goodslist:[],
                infiniteCount: 0
            }
        },
        created(){
            this.goodslist = _goodsList;
        },
        methods: {
            onRefresh: function (done) {
                var self = this
                setTimeout(function () {
                    self.goodslist=_goodsList;
                    self.infiniteCount =0;
                    done();
                }, 1500)
            },
            onInfinite: function (done) {
                if(this.infiniteCount <=3){
                    for (var i = 0; i < 5; i++) {
                        this.goodslist.push(_goodsList[i]);
                    }
                    this.infiniteCount++;
                }else{
                    return false;
                }
                done();
            },
            openpage:function(e){
                alert(e)
            }
        }
    });
</script>
</body>
</html>