uniapp uni-popup 闪动问题


需求:首页需要添加2个弹窗,效果如下:

 

 

 

 方法1: 如果使用两个弹窗,点击任务出现的弹窗和点击发现出现的弹窗会相互影响,有时会出现任务和发现图标闪动问题、而且弹窗不显示问题,需要点击多次才会出现弹窗。

终极解决:   将两个弹窗的数据进行封装,点击发现和任务分别赋予弹窗不同的数据。

代码:

<uni-popup ref="popup" type="bottom" class="popup">
            <view class="new_create">
                <view class="task_item" v-for="(item,index) in list" :key="item.id" @click="goPage(item.url)">
                    <image :src="item.icon"></image>
                    <text>{{item.title}}</text>
                </view>
            </view>
 </uni-popup>
<script>
    export default {
        data() {
            return {
                //任务弹窗数据
                data1:[
                    {id:1,icon:"../../static/h1.png",url:"/pages/index/create",title:"新建任务"},
                    {id:2,icon:"../../static/h2.png",url:"/pages/index/historytask",title:"历史任务"},
                ],
                //载入地图数据
                data2:[
                    {id:1,icon:"../../static/map.png",url:"/pages/xinzeng/map",title:"载入地图"},
                    {id:2,icon:"../../static/all.png",url:"/pages/xinzeng/global",title:"全局管理"},
                    {id:3,icon:"../../static/custom.png",title:"自定义"},
                ],
                //弹窗数据
                list:[],
            }
        },
        methods: {
            //扫码
            scancodeHandle() {
                uni.scanCode({
                    success: (res) => {
                        console.log('条码类型:' + res.scanType);
                        console.log('条码内容:' + res.result);
                        uni.navigateTo({
                            url: "/pages/xinzeng/coderobit"
                        })
                    }
                });
            },
            goPage(url){
                uni.navigateTo({
                    url:url
                })
            }
        },
        //tabbar监听事件
        onTabItemTap(e) {
            console.log(e);
            if (e.index == 0) {
                this.list = this.data1;
                this.$refs.popup.open('top')
            }
            if (e.index == 2) {
                this.list = this.data2;
                this.$refs.popup.open('top')
            }
        }
    }
</script>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM