vue 分页手写
<template><div >
<nav-con ></nav-con>
<div class="container" :class="{'container-ipx': ipx,'container-iphone': iphone}" >
<ul class="list" ref="list">
<li v-for="(i,index) in list" :key="index">
<img :src="i.avatar" alt="" class="avatar">
<div class="info">
<div class="info-wrap">
<p class="name">{{i.name}}</p>
<div class="other">
<div class="sex" :class="i.sex == 'M' ? 'male' : 'female'">
<img :src="i.sex == 'M' ? 'male.png' : 'female.png'" alt="" class="sex-icon">
{{i.age}}
</div>
<div class="level" v-if="i.growup">Lv.{{i.growup.level}}</div>
</div>
<div class="time" v-if="i.msgtime">最后发言时间：{{i.msgtime | timeComputed}}天前</div>
</div>
<div class="greet" @click="(i.mid == mid_self || i.is_greet) ? '' : triggleConfirm(true,i.name,i.mid,index)" :class="(i.mid == moid_self || i.is_greet) ? 'greet-gray' : ''">问候</div>
</div>
</li>
</ul>
</div>
<div class="container container-no" :class="{'container-ipx': ipx,'container-iphone': iphone}" v-if="Object.keys(list).length == 0 && !isLoad">
<div class="main">
<img src="../../assets/images/no-big.png" alt="">
</div>
</div>
<div class="container container-no" :class="{'container-ipx': ipx,'container-iphone': iphone}" v-if="isLoad">
<div class="momo-ing-loading"></div>
</div>
</div>
</template>
<script>
import { iphoneAdapterByUA } from "../../utils/index";
import dao from "../../dao";
import navCon from '../../components/NavCon'
export default {
components: {
navCon,
},
data() {
return {
list: [],
greet_name: '',
index: 0,
isLoad: true,
greet_index: '',
momoid_self: '',
time: ''
};
},
filters: {
timeComputed(msgtime){
let stamp = Math.floor(new Date().getTime() / 1000)
return Math.ceil((stamp - msgtime) / 86400)
},
strDeal(str){
let res = str.substring(0,12)
return res + '...'
}
},
methods: {
getList(isAppend){
if(!isAppend){
this.isLoad = true
}
dao.getList({gid: this.gid,index: this.index,count: 100}, (res) => {
this.isLoad = false
if(res.ec == 0){
this.time = res.timesec
if(isAppend){
this.list = this.list.concat(res.data.list)
} else {
this.momoid_self = res.data.momoid
this.list = res.data.list
this.$nextTick(() => {
// 初始化监听window滚动事件
let container = document.getElementById('container')
if(container){
container.addEventListener('scroll', this.handleScroll)
}
})
}
this.remain = res.data.remain
this.index = this.index + 100
} else {
mm.ui.showMessage({
status: 1,
message: res.em
});
}
})
},
handleScroll(){
let position_info = this.$refs.list.getBoundingClientRect(),
distance = window.innerHeight - (position_info.top + position_info.height)
if(distance >= -200 && this.remain == 1 && !this.isLoad){
this.index ++
this.getList(true)
}
},
triggleConfirm(bool,name,id,index){
if(bool){
this.greet_name = name
this.greet_id = id
this.greet_index = index
}
this.showConfirm = bool
}
},
created() {
mm.ui.setPulldown({
type: 0 // Int: 1-允许下拉，0-不允许下拉
})
iphoneAdapterByUA();
this.ipx = window.DEVICE_OS && window.DEVICE_OS === 'iosx';
this.iphone = window.DEVICE_OS && window.DEVICE_OS === 'ios';
},
mounted() {
// let url = location.href,
// paramStr = url.split('?')[1],
// paramArr = paramStr.split('&'),
// obj = {}
// for(let i in paramArr){
// let arr = paramArr[i].split('=')
// obj[arr[0]] = arr[1]
// }
// this.gid = obj.scene_id
this.getList(0,false)
}
};
</script>
<style lang="postcss">
.container{
width: 100%;
height: 100vh;
overflow: scroll;
background-color:#ffffff;
box-sizing: border-box;
padding-top: 82px;
-webkit-overflow-scrolling: touch;
.title{
font-size: 24px;
color: #323333;
font-weight: bold;
margin: 38px 0 36px 40px;
}
.list{
padding-top: 13px;
padding-bottom: 70px;
li{
width: 100%;
padding: 27px 28px;
overflow: hidden;
box-sizing: border-box;
.avatar{
width: 140px;
height: 140px;
border-radius: 70px;
margin-right: 24px;
float: left;
}
.info{
float: left;
height: 140px;
width: calc(100% - 164px);
/* margin-right: 30px; */
/* height: 100%; */
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.info-wrap{
margin-right: 30px;
width: calc(100% - 146px);
height: 100%;
}
.name{
font-size: 32px;
color: #323333;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 9px;
}
.other{
margin-top: 8px;
overflow: hidden;
&>div{
display: flex;
justify-content: center;
align-items: center;
float: left;
margin-right: 6px;
font-size: 18px;
}
.sex{
padding: 0 8px;
min-width: 60px;
height: 24px;
box-sizing: border-box;
border-radius: 13px;
color: #fff;
font-size: 20px;
float: left;
line-height: 25px;
.sex-icon{
margin-right: 2px;
}
}
.male{
background: #4cd3ea;
}
.female{
background: #ff79b8;
}
.level{
min-width: 56px;
height: 24px;
padding: 0 10px;
border-radius: 12px;
color: #fff;
padding: 0 10px;
box-sizing: border-box;
/* font-size: 18px; */
background: #e59b58;
}
}
.time{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 26px;
color: #aaa;
margin-top: 10px;
}
}
.greet{
width: 116px;
height: 60px;
border-radius: 30px;
background: #3bb3fa;
color: #fff;
font-size: 28px;
line-height: 60px;
text-align: center;
}
.greet-gray{
background: #ebebeb !important;
color: #cdcdcd !important;
}
}
}
}
.container-ipx{
padding-top: 176px;
}
.container-iphone{
padding-top: 128px;
}
.container-no{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.main{
position: absolute;
top: 39%;
left: 50%;
transform: translate(-50%,-50%);
img{
width: 98px;
display: block;
margin: 0 auto;
}
p{
text-align: center;
}
.line1{
color: #323333;
font-size: 32px;
margin-top: 42px;
margin-bottom: 10px;
}
.line2{
color: #aaa;
font-size: 28px;
}
}
}
.confirm{
background: #fff;
border-radius: 30px;
padding: 98px 0 30px 0;
box-sizing: border-box;
display: flex;
align-items: center;
flex-direction: column;
img{
height: 280px;
}
.greeat-text{
margin-top: 64px;
.title{
font-size: 36px;
color: #323333;
text-align: center;
}
.msg{
width: 408px;
font-size: 28px;
color: #aaa;
text-align: center;
margin-top: 10px;
}
}
.confirm-btn{
width: 400px;
height: 100px;
border-radius: 50px;
color: #fff;
background: #3bb3fa;
margin-top: 80px;
text-align: center;
line-height: 100px;
font-size: 28px;
font-weight: bold;
}
.cancel{
color: #aaa;
font-size: 28px;
margin-top: 30px;
text-align: center;
}
}
.momo-breathing-loading {
width: 120px;
height: 120px;
opacity: 0;
animation: breathing 1.6s steps(1) infinite forwards;
background-repeat: no-repeat;
background-size: 480px 480px;
background-image: url("oading.png");
}
@keyframes breathing {
0% {
opacity: 0.8;
background-position: 0 0;
}
6.25% {
background-position: -120px 0;
}
12.5% {
background-position: -240px 0;
}
18.75% {
background-position: -360px 0;
}
25% {
background-position: 0 -120px;
}
31.25% {
background-position: -120px -120px;
}
37.5% {
background-position: -240px -120px;
}
43.75% {
background-position: -360px -120px;
}
50% {
background-position: 0 -240px;
}
56.25% {
background-position: -120px -240px;
}
62.5% {
background-position: -240px -240px;
}
68.75% {
background-position: -360px -240px;
}
75% {
background-position: 0 -360px;
}
81.25% {
background-position: -120px -360px;
}
87.5% {
background-position: -240px -360px;
}
93.75% {
opacity: 0.8;
background-position: -360px -360px;
}
}
</style>
以上是 vue 分页手写 的全部内容， 来源链接： utcz.com/z/376216.html
