4***@qq.com
4***@qq.com
  • 发布:2023-06-05 09:31
  • 更新:2023-06-05 09:31
  • 阅读:198

安卓端 tarbar页,使用@touchmove做滑动效果,页面会出现部分闪屏的bug;非tarbar页面不会出现

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 10

HBuilderX类型: 正式

HBuilderX版本号: 3.6.14

手机系统: Android

手机系统版本号: Android 13

手机厂商: 小米

手机机型: 小米10s

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

App下载地址或H5⽹址: https://img.implay.co/android/todo.apk

示例代码:
                                      <view class="taskBox">  
                    <view class="taskListBox flexEndBox" v-show="noItem.isItem" v-for="(noItem,todoIndex) in todoList" :key="todoIndex"  :style="{'height':noItem.height+'rpx','opacity':noItem.opacity,'margin-top':noItem.marginBottom+'rpx'}">  
                        <view class="taskListCon flexStartBox" :style="{'left':noItem.taskLeft+'rpx'}" :data-index="todoIndex" @touchstart="todoStart" @touchmove="todoMove" @touchend="todoEnd">  
                            <view class="flexStartBox taskListLeft">  
                                <view class="taskCon columnBox" :data-index="todoIndex" data-checksta="todo" @click.stop="openAddNewTask">  
                                    <view class="taskTitle">{{noItem.title}}</view>  
                                    <view class="flexStartBox">  
                                        <text class="taskDate" v-if="language=='zh'||language=='ja'" :style="{color:'rgba('+noItem.timeColor+',1)'}">{{currYear==noItem.year?'':noItem.year+'/'}}{{noItem.month?noItem.month+'/':''}}{{noItem.day?(noItem.day<10?'0'+noItem.day:noItem.day):''}} {{noItem.hhS?noItem.hhS+':':''}}{{noItem.mnS?noItem.mnS:''}} {{language=='zh'?'周'+noItem.weekEn:noItem.weekEn}}</text>  
                                        <text class="taskDate" v-else :style="{color:'rgba('+noItem.timeColor+',1)'}">{{noItem.weekEn+','}} {{noItem.monthEn?noItem.monthEn+' ':''}}{{noItem.day?(noItem.day<10?'0'+noItem.day:noItem.day):''}}{{currYear==noItem.year?'':', '+noItem.year}} {{noItem.hhS?noItem.hhS+':':''}}{{noItem.mnS?noItem.mnS:''}}</text>  
                                        <image src="../../static/tx_ok.png" v-show="noItem.notification&&noItem.state==0" class="txIco" mode=""></image>  
                                    </view>  
                                </view>  
                            </view>  
                            <view class="checkView flexCenterBox" :style="{'background':noItem.state?'#D9D9D9':'#ffffff','border':noItem.state?'1px solid #D9D9D9':'1px solid #A377FF'}" @click.stop="clickTask" :data-state="noItem.state" :data-id="noItem.taskId" :data-index="todoIndex" data-tasksta="todo">  
                                <!-- <view class="checkedIco" v-show="noItem.state"></view> -->  
                                <image src="../../static/checked.png" class="checkedIco2" v-show="noItem.state" mode=""></image>  
                            </view>  
                        </view>  
                        <view class="delBox flexCenterBox" :style="{'width':-noItem.taskLeft+'rpx'}" @click.stop="CheckDel" :data-id="noItem.taskId" :data-index="todoIndex" data-tasktas="todo">  
                            <image src="../../static/del2.png" class="delIco" mode=""></image>  
                        </view>  
                    </view>  
                </view>  

//todoList滑动开始
todoStart: function(e){
console.log('滑动开始',e)
let that = this;
let index = e.currentTarget.dataset.index;
let startX = e.touches[0].clientXapp.globalData.RPX;
let startY = e.touches[0].clientY
app.globalData.RPX;
that.startX = startX;
that.startY = startY;
that.preX = startX;
for(let i=0; i<that.todoList.length; i++){
if(i!=index){
if(that.todoList[i].taskLeft<0){
let timer = setInterval(()=>{
that.todoList[i].taskLeft +=20;
if(that.todoList[i].taskLeft>=0){
that.todoList[i].taskLeft=0
clearInterval(timer);
}
},10)
}
}
}
},
//todoList滑动中
todoMove: function(e){
//console.log('滑动中',e)
let that = this;
let index = e.currentTarget.dataset.index;
let moveX = e.touches[0].clientXapp.globalData.RPX;
let moveY = e.touches[0].clientY
app.globalData.RPX;
let delX = Math.abs(moveX-that.startX);
let delY = Math.abs(moveY-that.startY);
if(delX > delY){
//console.log('阻止上下滑动--------------------')
e.preventDefault();
that.isScroll = false
let chaX = moveX-that.preX;
that.todoList[index].taskLeft+=chaX;
if(that.todoList[index].taskLeft>0){
that.todoList[index].taskLeft = 0
}
that.preX = moveX;
}

        },  

        //todoList滑动结束  
        todoEnd: function(e){  
            console.log('滑动结束',e)  
            let that = this;  
            that.isScroll = true  
            let index = e.currentTarget.dataset.index;  
            //console.log('滑动的距离',that.todoList[index].taskLeft)  
            if(that.todoList[index].taskLeft>-60){  
                let timer = setInterval(()=>{  
                    that.todoList[index].taskLeft +=10;  
                    if(that.todoList[index].taskLeft>=0){  
                        that.todoList[index].taskLeft=0  
                        clearInterval(timer);  
                    }  
                },6)  
            }  
            if(that.todoList[index].taskLeft<=-60&&that.todoList[index].taskLeft>-152){  
                let timer = setInterval(()=>{  
                    that.todoList[index].taskLeft -=10;  
                    if(that.todoList[index].taskLeft<=-152){  
                        that.todoList[index].taskLeft=-152  
                        clearInterval(timer);  
                    }  
                },6)  
            }  
            if(that.todoList[index].taskLeft<-152){  
                let timer = setInterval(()=>{  
                    that.todoList[index].taskLeft +=20;  
                    if(that.todoList[index].taskLeft>=-152){  
                        that.todoList[index].taskLeft=-152  
                        clearInterval(timer);  
                    }  
                },10)  
            }  
            // if(that.todoList[index].taskLeft<-352){  
            //  let timer = setInterval(()=>{  
            //      that.todoList[index].taskLeft -=10;  
            //      if(that.todoList[index].taskLeft<=-706){  
            //          that.todoList[index].taskLeft=-706  
            //          clearInterval(timer);  
            //      }  
            //  },2)  
            //  console.log('执行删除');  
            // }  
        },  

操作步骤:

1.打开app登录注册,2.点击首页加号,添加事项;3.向左滑动事项列表,显示右边删除按钮;

预期结果:

滑动应该是丝滑的

实际结果:

滑动卡顿,闪屏

bug描述:

在tarbar页使用@touchmove做滑动效果会出现部分闪屏问题

2023-06-05 09:31 负责人:无 分享
已邀请:

要回复问题请先登录注册