<template> <div class="mainPage"> <scroll ref='scroll' :isloading='isloading' class='wrapper' :data='list' :pullUpLoad='pullUpLoadObj' :startY='parseInt(startY)' @pullingUp='getList'> <div class="box"> <discounts v-for="(item,index) in list" :key='index' @toUse='toUse' :data='item'></discounts> <noMore v-if="hasPic"></noMore> </div> </scroll> </div> </template> <script> import line from '../../../common/icon/cicyle.png' import logo from '../../../common/icon/logo-t.png' import Line3 from '../../../common/icon/Line3.png' import used from '../../../common/icon/already.png' import failure from '../../../common/icon/inv.png' // 上拉加载组件 import scroll from '../../../components/scroll/scroll' import noMore from '../../../components/noMore/noMore' import discounts from '../../../components/discounts/discounts' export default { data () { return { logo, Line3, used, failure, pullUpLoad: true, pullUpLoadThreshold: 40, startY: 0, isloading: true, hasPic: false, hasMore: true, list: [ { title: '小小外交官体验卡', desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程', time: '2018年02月17日', useType: '未使用', tag: '共享' }, { title: '小小外交官体验卡', desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程', time: '2018年02月17日', useType: '已使用', tag: '商品' }, { title: '小小外交官体验卡', desc: '凭此体验券可让一位小朋友体验一次 适用于小小外交官课程', time: '2018年02月17日', useType: '已失效', tag: '商品' } ], line } }, components: { scroll, noMore, discounts }, computed: { pullUpLoadObj: function () { return this.pullUpLoad ? { threshold: parseInt(this.pullUpLoadThreshold), txt: { more: this.pullUpLoadMoreTxt, noMore: this.pullUpLoadNoMoreTxt } } : false } }, methods: { change (item, index) { this.active = index }, toUse (item) { // console.log(item) }, getList () { // console.log(111) } } } </script> <style lang="scss" scoped> @import "page.scss"; </style>