search.vue
2.89 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<template>
<div class="zj-main">
<div class="search-leftbtn" @click="gotoback"></div>
<mt-search v-model="value" style="width:calc(100% - 20px);float:right;" :autofocus="autofocus">
<mt-loadmore :bottom-method="loadBottom" @bottom-status-change="handleBottomChange"
:bottom-all-loaded="allLoaded" ref="loadmore">
<ul class="goods-small-ul" style="margin-top:0px">
<small-pic v-for="item in list" :item="item"></small-pic>
</ul>
<!--<ul class="page-loadmore-list">-->
<!--<return-goods-item v-for="item in list"></return-goods-item>-->
<!--<li class="loadmore-end" v-show="allLoaded">--end--</li>-->
<!--<li class="loadmore-end" v-if="browsertyper=='pc'"><mt-button size="small" type="primary" plain >点击加载更多</mt-button></li>-->
<!--</ul>-->
<div slot="bottom" class="mint-loadmore-bottom">
<span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
<span v-show="bottomStatus === 'loading'">
<mt-spinner type="snake"></mt-spinner>
</span>
</div>
</mt-loadmore>
</mt-search>
</div>
</template>
<style>
.main .mint-swipe-indicators {
left: auto !important;
bottom: 5px !important;
right: -16px;
}
</style>
<script type="text/ecmascript-6">
import smallPic from '../goods/smallPic.vue';
export default {
data() {
return {
value: '',
allLoaded: false,
autofocus: true,
browsertyper: '',
bottomStatus: '',
wrapperHeight: 0,
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
},
components: {
smallPic
},
methods: {
gotoback(){
this.$router.go(-1)
},
handleBottomChange(status) {
this.bottomStatus = status;
},
loadBottom(id) {
setTimeout(() => {
let lastValue = this.list[this.list.length - 1];
if (lastValue < 40) {
for (let i = 1; i <= 10; i++) {
this.list.push(lastValue + i);
}
} else {
this.allLoaded = true;
}
this.$refs.loadmore.onBottomLoaded(id);
}, 1500);
}
},
beforeRouteEnter (to, from, next){
next(vm => {
vm.browsertyper = window.BROWSERTYPER;
});
},
beforeRouteLeave (to, from, next){
next();
},
}
</script>