2021-10-28

标题vue写移动端IOS左滑删除动态效果

<template>
<div class="mbody" id="mbody" @click.self ="animate">
    <!-- @click.self ="animate" -->
    <van-row>
        <van-col span="5">
            <h1>消息</h1>
        </van-col>
        <van-col span="15"></van-col>
        <van-col span="2"><van-icon name="search" /></van-col>
        <router-link to="/msg_search"><van-col span="2"><van-icon name="filter-o" /></van-col></router-link>
    </van-row>
    <ul v-if="msg.length !== 0">
        <li
        v-for="(item,index) in msg"
        :key="index+'a'"
        @touchstart='movestae($event)'
        
        @touchend='moveend(item,$event)'
        >
        <!-- @click="dianj(item)"
        @touchmove='move($event)'
        -->
            <div class="poto">
                <!-- <img src="../../assets/mipmap-mdpi/蒙版组 2.png" alt=""> -->
            </div>
            <div class="msg_g">
                <p>{{item.userinfo.nickname}}</p>
                <span style="color:#D0D0D0;">{{item.title}}</span>
            </div>
            <div class="time">
                <p class="rig" style="color: #999999; font-size: 10px">{{timestampToTime(item.createtime)}}</p><br>
                <p class="badgee rig">{{item.uid}}</p>
            </div>
            <div class="shou">
                <div class="top">
                    顶置
                </div>
                <div class="unread">
                    标记未读
                </div>
                <div class="del" @click="del(item,$event)">
                    删除
                </div>
            </div>
        </li>
    </ul>
    <h1 class="none" v-else>您暂无好友消息</h1>
</div>
</template>
<script>
import $ from 'jquery'
import axios from 'axios'
import { number } from 'echarts'
export default {
    data(){
        return {
            msg:[],
            pagexstae: null,
            pagex: null,
            name: ''
        }
    },
    mounted(){
        document.getElementsByClassName('mbody')[0].style.minHeight = window.screen.availHeight-140+'px'
        axios({
            url: 'message/getlist'
        }).then(res => {
            this.msg = res.data.data.data
        })
    },
    methods: {
        movestae(e){
            this.name = ''
            // $(e.target)[0].innerHTML
            if($(e.target).parent().children('.msg_g').children('p').html() != undefined){
                this.name = $(e.target).parent().children('.msg_g').children('p').html()
            }
            this.pagexstae = parseInt(Number(e.touches[0].pageX))
        },
        // move(e){
        //     this.pagex = parseInt(Number(e.touches[0].pageX))
        // },
        timestampToTime (cjsj) {
            var date = new Date(cjsj*1000) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-'
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
            var D = date.getDate() + ' '
            return Y+M+D
        },
        moveend(item,e){
            this.pagex = parseInt(Number(e.changedTouches[0].pageX))
            if(this.pagexstae - this.pagex > 10){
                for(let i = 0; i < this.msg.length ; i++){
                    $(e.target).parent().animate({left: '-13.4rem'})
                    $(e.target).parent().siblings().animate({left: '0rem'})
                }
            }else{
                this.dianj(item)
                // console.log(1111);
            }
        },
        dianj(item){
            this.$router.push({
                path: `msg_details/${encodeURIComponent(JSON.stringify(item))}`
            })
        },
        animate(){
            $('li').animate({left: '0rem'})
        },
        del(item,e){
            item,e
            console.log(e);
            // $(e.target).siblings().hide()
            // $(e.target).animate({width: '12rem'})
            // console.log($(e.target).width());
        }
    }
}
</script>
<style lang="scss" scoped>
.mbody{
    width: 100%;
    min-height: 40.5rem;
    padding-bottom: 5rem;
    overflow: hidden;
}
h1{
    color: #fff;
    font-size: 2rem;
    margin-left: 1rem;
}
i{
    padding-top: 1rem;
    font-size: 1.5rem;
}
.none{
    color: #fff;
    font-size: 2rem;
    text-align: center;
    line-height: 400px;
}
ul{
    width: 96%;
    height: 100%;
    margin: 0 auto;
    margin-top: 2rem;
    li{
        width: 156%;
        height: 4rem;
        border-bottom: solid 1px #082B54;
        display: flex;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        margin-left: 0rem;
        position: relative;
        img{
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
        }
        .poto{
            float: left;
            width: 4rem;
            height: 4rem;
        }
        .msg_g{
            width: 75%;
            height: 4rem;
            line-height: 2rem;
            float: left;
        }
        .time{
            width: 21%;
            height: 4rem;
            float: left;
            padding: 0rem;
            p{
                padding-bottom: 0rem;
            }
        }
        .badgee{
            width: 1.5rem;
            height: 1.5rem;
            background-color: red;
            border-radius: 50%;
            text-align: center;
        }
        .rig{
            float: right;
        }
        .shou{
            width: 13rem;
            height: 4rem;
            line-height: 4rem;
            float: right;
            display: flex;
            margin-left: 1rem;
        }
        .top{
            height: 4rem;
            width: 4rem;
            background-color: #C8C7CC;
            text-align: center;
            line-height: 4rem;
        }
        .unread{
            height: 4rem;
            width: 8rem;
            background-color: #F89C2F;
            text-align: center;
            line-height: 4rem;
        }
        .del{
            height: 4rem;
            width: 4rem;
            background-color: #E75E58;
            text-align: center;
            line-height: 4rem;
        }
    }
    .righ{
        width: 167%;
        animation-duration: 1000;
        transform: scaleX(1);
    }
}
</style>