vux [Bug Report] 急! swipeout和swipeout-item 渲染问题

vyu0f0g1  于 2023-03-19  发布在  其他
关注(0)|答案(4)|浏览(226)

VUX version

2.9.4

OS/Browsers version

mac safari 或者 ios safari

Vue version

2.6.10

Code

<div v-for="(item,index) in data">
                        <p class="tag" :id="`tag${index}`">{{item.catagory}}</p>
                        <swipeout v-for="(item,index) in item.list" :key="`item${index}`">
                            <swipeout-item :threshold=".5" underlay-color="#F5F5FA" :disabled="!deleteState">
                                <div slot="right-menu">
                                    <swipeout-button @click.native="" background-color="#D23934">
                                        删除
                                    </swipeout-button>
                                </div>
                                <czcb-cell :title="item.title"
                                           :rightArrow="false" slot="content">
                                    <div slot="icon">
                                        <img :src="require('@assets/transfer/icon_delete2@2x.png')" v-if="deleteState" class="delete-icon">
                                        <sLogo v-else :logo="item.icon" class="logo"></sLogo>
                                    </div>
                                    <span slot="titleTip">
                                        {{item.name}} 尾号 {{item.num.substr(-4,4)}}
                                    </span>
                                </czcb-cell>
                            </swipeout-item>
                        </swipeout>
                    </div>

Steps to reproduce

运行代码 滑动页面

What is Expected?

bug表现看这个小视频 #在抖音，记录美好生活#bug test http://v.douyin.com/hTf5Ve/ 复制此链接，打开【抖音短视频】，直接观看视频！
上下滑动过程中不闪现“删除”按钮

What is actually happening?

闪现滑动过程中会闪现“删除”按钮

vux

4条答案

按热度按时间
guicsvcw

guicsvcw1#

iphone上也是一样的问题（ios 12 safari）

赞(0）分享  回复(0）举报  2023-03-19
0yg35tkg

0yg35tkg2#

提供必要的完整代码以便复现

赞(0）分享  回复(0）举报  2023-03-19
fbcarpbf

fbcarpbf3#

提供必要的完整代码以便复现

<template>
    <div id="container">
        <template v-if="noData">
            <m-header :rightMenu="menus[0]"></m-header>
            <div id="no-data-box">
                <img :src="require('@assets/transfer/no-data.png')">
                <p>暂无定向收款人</p>
                <img src="~@assets/bg_logo@2x.png" class="bottom-logo"/>
            </div>
        </template>
        <template v-else>
            <m-header :rightMenu="deleteState?menus[2]:menus[1]" @rightHandler="menuHandler"></m-header>
            <div id="data-box">
                <div id="ins-box">
                    <p>{{instructions}}</p>
                </div>
                <div id="list-box" @touchmove="checkLeader" @touchend="checkLeader" @wheel="checkLeader">
                    <div v-for="(item,index) in data">
                        <p class="tag" :id="`tag${index}`">{{item.catagory}}</p>
                        <swipeout v-for="(item2,index2) in item.list" :key="`item${index2}`">
                            <swipeout-item :threshold=".5" underlay-color="#F5F5FA" :disabled="!deleteState">
                                <div slot="right-menu" v-show="deleteState">
                                    <swipeout-button @click.native="" background-color="#D23934">
                                        删除
                                    </swipeout-button>
                                </div>
                                <czcb-cell :title="item2.title"
                                           :rightArrow="false" slot="content">
                                    <div slot="icon">
                                        <img :src="require('@assets/transfer/icon_delete2@2x.png')" v-if="deleteState"
                                             class="delete-icon">
                                        <sLogo v-else :logo="item2.icon" class="logo"></sLogo>
                                    </div>
                                    <span slot="titleTip">
                                        {{item2.name}} 尾号 {{item2.num.substr(-4,4)}}
                                    </span>
                                </czcb-cell>
                            </swipeout-item>
                        </swipeout>
                    </div>
                </div>
                <div id="navi-box" v-show="!deleteState">
                    <p v-for="(item,index) in alphabet" :id="'navi'+index" :index="index"
                       :class="{'highlighted':selectedIndex==index,'unhighlighted':index>0&&(!data[index-1]||data[index-1].list.length==0)}"
                       @touchstart="scrollTo(index)" @click.native="scrollTo(index)">{{item}}</p>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
    import czcbCell from "@comps/czcb_cell" ;
    import sLogo from '@comps/czcb_symbolLogo';
    import {Swipeout, SwipeoutItem, SwipeoutButton} from 'vux'

    var observer;
    
    export default {
        name: "directional_reveiver",
        components: {
            czcbCell,
            sLogo,
            Swipeout,
            SwipeoutItem,
            SwipeoutButton,
        },
        data() {
            return {
                noData: false,
                menus: [
                    [{
                        "text": "添加",
                        "color": "#888888"
                    }],
                    [{
                        "text": "编辑收款人",
                        "color": "#888888"
                    }],
                    [{
                        "text": "完成",
                        "color": "#888888"
                    }],
                ],
                deleteState: false,
                data: [
                    {
                        catagory: 'A',
                        list: [
                            {
                                title: '张三',
                                icon: "CZCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CZCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CZCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            }
                        ]
                    },
                    {
                        catagory: 'B',
                        list: [
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            }
                        ]
                    },
                    {
                        catagory: 'C',
                        list: [
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            }
                        ]
                    },
                    {
                        catagory: 'D',
                        list: [
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            }
                        ]
                    },
                    {
                        catagory: 'E',
                        list: [
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            }
                        ]
                    },
                    {
                        catagory: 'F',
                        list: [
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            }
                        ]
                    },
                    {
                        catagory: 'G',
                        list: [
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            },
                            {
                                title: '张三',
                                icon: "CCB",
                                name: '浙江稠州商业银行',
                                num: '6247********6789',
                            }
                        ]
                    },
                    {
                        catagory: 'H',
                        list: [],
                    },
                    {
                        catagory: 'I',
                        list: [{
                            title: '张三',
                            icon: "CCB",
                            name: '浙江稠州商业银行',
                            num: '6247********6789',
                        }],
                    },
                ],
                instructions: '定向收款人说明，文案行方提供。最多不超过两行。定向收款人说明，文案行方提供。最多不超过两行',
                alphabet: [],
                selectedIndex: 0,
                tagVisible: [],
            }
        },  
        created() {
            let temp = new Array(26).fill('').map((item, index) => String.fromCharCode(97 + index));
            temp.unshift('#');
            this.alphabet = temp;
            temp = new Array(27).fill(false);
            this.tagVisible = temp;
        },
        mounted() {
            this.addListeners();
        },
        methods: {
            menuHandler(res) {
                if (this.noData) {

                } else {
                    if (res == 0) {
                        this.deleteState = !this.deleteState;
                    }
                }
            },
            addListeners() {
                document.getElementById('navi-box').addEventListener('touchmove', this.touchMoveListener, false);
                observer = new IntersectionObserver(this.updateTag);
                let tags = document.getElementsByClassName('tag');
                Array.prototype.map.call(tags, item => observer.observe(item));
                observer.observe(document.getElementById('ins-box'));
            },
            updateTag(entries) {
                entries.map((item) => {
                    if (item.intersectionRatio > 0) {
                        let target = item.target;
                        if (target.tagName == 'DIV') {
                            this.$set(this.tagVisible, 0, true)
                        } else {
                            let i = Number(target.id.substr(3)) + 1;
                            this.$set(this.tagVisible, i, true)
                        }
                    } else {
                        let target = item.target;
                        if (target.tagName == 'DIV') {
                            this.$set(this.tagVisible, 0, false)
                        } else {
                            let i = Number(target.id.substr(3)) + 1;
                            this.$set(this.tagVisible, i, false)
                        }
                    }
                });
            },
            checkLeader(){
                var _this = this;
                setTimeout(()=>{
                    let i = 0;
                    while (i <= 26 && !_this.tagVisible[i]) i++;
                    _this.selectedIndex = i;
                },150); //保证intersectionObserver在checkLeader之前更新tagVisiable列表
            },
            scrollTo(index) {
                if (index == 0) {
                    document.getElementById('ins-box').scrollIntoView({
                        block: "start",
                        inline: "nearest",
                        behavior: 'smooth'
                    });
                } else {
                    let captureElement = document.getElementById('tag' + (index - 1));
                    if (captureElement) {
                        let distance = captureElement.parentNode.offsetTop + 60;
                        window.scrollTo({top: distance, behavior: "smooth"});
                    }
                }
                this.selectedIndex = index;
            },
            touchMoveListener(e) {
                e.preventDefault();
                let captureElement = document.elementFromPoint(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
                if (captureElement.id.indexOf('navi') > -1 && captureElement.getAttribute('index')) {
                    let i = captureElement.getAttribute('index');
                    this.scrollTo(i);
                }
            }
        }
    }
</script>

<style lang="scss">
    * {
        touch-action: pan-y;
    }

    #container {
        #no-data-box {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #fff;

            img:first-child {
                width: 150px;
                height: 150px;
                margin: 75px auto 0.2rem auto;
            }

            p {
                font-family: PingFang-SC-Medium;
                font-size: 16px;
                color: #444444;
                letter-spacing: 0;
                text-align: center;
            }
        }

        #data-box {
            position: relative;

            #ins-box {
                width: 100%;
                height: 50px;
                background-color: #FFF8D8;
                display: flex;
                align-items: center;
                padding: 0 0.2rem;
                box-sizing: border-box;

                p {
                    font-family: PingFangSC-Regular;
                    font-size: 12px;
                    color: #999999;
                    letter-spacing: 0;
                }
            }

            #list-box {
                position: relative;

                .tag {
                    position: sticky;
                    top: 0;
                    height: 30px;
                    background-color: #F5F5FA;
                    padding-left: 0.3rem;
                    font-family: PingFangSC-Regular;
                    font-size: 12px;
                    color: #999999;
                    letter-spacing: 0;
                    line-height: 30px;
                    z-index: 999;
                }

                .czcb-cell {
                    height: auto;
                    padding: 0.2rem 0.38rem;
                    border-bottom: 1px solid #DFDFDF;

                    .czcb-cell__icon {
                        & > div {
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            .logo.icon {
                                height: 0.5rem;
                                width: 0.5rem;
                            }
                        }

                        .delete-icon {
                            height: 0.38rem;
                            width: 0.38rem;
                            margin: 0.2rem;
                        }
                    }

                    .czcb-cell__subtitle {
                        font-family: PingFangSC-Regular;
                        font-size: 12px;
                        color: #999999;
                        letter-spacing: 0;
                        line-height: 16px;
                    }
                }
                
                .vux-swipeout:last-child .czcb-cell{
                    border:none;
                }
            }

            #navi-box {
                position: fixed;
                top: 80px;
                right: 0;
                width: 38px;
                height: calc(100% - 160px);
                z-index: 99999;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                align-items: center;

                p {
                    font-family: PingFangSC-Regular;
                    font-size: 12px;
                    color: #4A90E2;
                    letter-spacing: 0;
                    text-align: center;
                    width: 60%;

                    &.highlighted {
                        font-weight: 800;
                        background-color: #4A90E233;
                        border-radius: 6px;
                    }

                    &.unhighlighted {
                        font-weight: normal !important;
                        background: none !important;
                        color: #cccccc !important;
                    }
                }
            }
        }
    }
</style>
赞(0）分享  回复(0）举报  2023-03-19
htzpubme

htzpubme4#

代码只能阅读 运行的话需要很多依赖和环境
我临时用 v-show="deleteState"来控制 可以不闪现 删除 按钮
但是我想明白具体是为什么会闪现 有没有根治的方法？

赞(0）分享  回复(0）举报  2023-03-19
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com