标签：vue 分页 color height background position 手写 font margin

<template>
    <div id="root">
        <nav-con id="nav" ref="nav" :title="'他们送上了祝福'"></nav-con>
        <div class="container" :class="{'container-ipx': ipx,'container-iphone': iphone}" id="container" v-if="Object.keys(list).length > 0 && !isLoad">
            <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,分页,color,height,background,position,手写,font,margin
来源： https://www.cnblogs.com/sybboy/p/12794227.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。