省钱兄
省钱兄
  • 发布:2021-05-07 15:16
  • 更新:2021-05-07 15:16
  • 阅读:478

【报Bug】在swiper-item 中 安卓的视频上上下滑动有时会失效,ios的就正常 有没有大佬能回复解决下?并且请求数据时,查看视频时,ios是可以往后追加查看的,安卓就返回到了第一条数据

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows7 旗舰版

HBuilderX类型: 正式

HBuilderX版本号: 3.1.12

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: 华为荣耀10

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

App下载地址或H5⽹址: https://www.pgyer.com/eFF4

示例代码:
             ```  

//组件滑动处理视频
changeCurrent(e) {
let that = this;
console.error(e.detail.current)
// if (plus.os.name.toLowerCase() === 'ios') {
that.changVideo(e.detail.current);
// }
},
//统一处理视频加载问题
changVideo(index) {
let that = this;
this.$nextTick(() => {
this.index = index;
for (let item of this.videoList) {
item.video.flag = true
}
that.videoList[that.index].video.flag = false;
if (this.Page < this.totalPages) {
console.error('下标对比:', this.index, this.oldIndex)
console.error('当前视频位数:' + index)
this.dangqianvideoId = this.videoList[this.index].video.videoId
this.redCount = this.videoList[this.index].video.redCount
var len = this.videoList.filter(item => item.video.url).length
//剩余两条的时候加载视频
console.error('剩余两条的时候加载视频:' + len)
if (len - index - 1 <= 2 && index > 0) {
this.Page++
console.error('数据长度:' + this.videoList.length)
this.oldIndex = this.index
this.userList(this.Page);
}
this.music = this.videoList[this.index].music.musicId
this.musicid = this.videoList[this.index].music.musicId
this.musicName = this.videoList[this.index].music.musicName
this.musicList.push(this.videoList[this.index].music.musicName)
console.log('musicid:' + this.musicid)
} else {
this.Page = this.totalPages - 1;
}
// this.videoList[this.index].video.flag = true
this.listTouchDirection = null
this.goods = null
this.isCheck(this.videoList[index].video.videoId);

                this.giftNum(this.videoList[index].video.videoId);  
                //获取视频用户信息  
                this.getUser(this.videoList[index].userInfo.userId); //用户信息   
                // 观看视频 记录  
                let userId = uni.getStorageSync("userId");  
                if (timer2) {  
                    clearTimeout(timer2)  
                };  
                timer2 = setTimeout(() => {  
                    that.viewVideo(userId, that.videoList[index].video.videoId)  
                }, 4000)  
                //获取用户分享  
                this.refresh(); //用户分享  
                this.getMusic();  
                // 视频评论数   
                this.getTotal(this.videoList[index].video.videoId);  
                let localId = uni.getStorageSync("userId");  
                console.log(localId, '`````````', that.videoList[index].userInfo.userId)  
                if (localId == that.videoList[index].userInfo.userId) {  
                    that.who = 'my'  
                } else {  
                    that.who = 'other'  
                }  
                //设置播放视频  
                setTimeout(() => {  
                    if (this.videoList.length > 0) {  
                        // that.videoList[that.index].video.flag = true;  
                    }  
                }, 500)  
                setTimeout(() => {  

                    // that.videoList[that.index-1].video.flag = false;  
                }, 2000)  
            })  
        },  

// 视频列表
userList(page) {
let that = this;
uni.request({
url: config.APIHOST2 + '/video/userListByPraise',
data: {
page: page,
userId: uni.getStorageSync("userId"),
size: 10
},
sslVerify: false,
header: {
"content-type": "application/json"
},
method: "GET",
success: function(res) {
console.error('推荐视频:' + JSON.stringify(res.data.data))
uni.hideLoading();
if (res.data.status == 0 && res.data.data.length > 0) {
let dataArr = res.data.data;
that.totalPages = res.data.data.length;
// that.videoTotalElements = res.data.data.totalElements
console.log('推荐视频:', dataArr)
for (let i = 0; i < dataArr.length; i++) {
if (dataArr[i].videoStatistics.sumPraise == null || dataArr[i].videoStatistics
.sumPraise == '') {
dataArr[i].videoStatistics.sumPraise = 0
}
dataArr[i].video = Object.assign(dataArr[i].video, {
"flag": true,
"check": false,
"card": true
})
}
that.$nextTick(res => {
// let videoGroup = dataArr
let len = that.videoList.length

                            dataArr.forEach(val => {  
                                that.videoList.push(val);  
                            })  
                            that.oldIndex = that.index + 1  

                            that.dangqianvideoId = that.videoList[that.index].video.videoId  
                            that.redCount = that.videoList[that.index].videoStatistics.redCount  
                            console.error('检查集合数据' + that.videoList.length)  
                            console.error('检查当前位置' + that.index, that.dangqianvideoId)  
                            let localId = uni.getStorageSync("userId");  
                            if (localId == that.videoList[that.index].userInfo.userId) {  
                                that.who = 'my'  
                            } else {  
                                that.who = 'other'  
                            }  
                            that.music = that.videoList[that.index].music.musicId  
                            that.videoList[that.index].video.flag = false;  
                            that.refresh(); //用户分享    
                            // 视频评论数   
                            // that.getTotal(that.videoList[that.index].videoId)  
                            that.blockShow = true;  
                            that.getUser(that.videoList[that.index].userInfo.userId); //用户信息  
                            setTimeout(() => {  
                                // that.getUser(that.videoList[that.index].userInfo.userId); //用户信息   
                                // that.videoList[that.index-1].video.flag = false;  
                            }, 2000)  
                            // 观看视频 记录  
                            let userId = uni.getStorageSync("userId");  
                            if (timer2) {  

                                clearTimeout(timer2)  
                                timer2 = null  
                            };  
                            timer2 = setTimeout(() => {  
                                that.viewVideo(userId, that.videoList[that.index].video  
                                    .videoId)  
                            }, 1000)  
                            that.giftNum(that.videoList[that.index].video.videoId)  
                            that.realyFollow(that.videoList[that.index].userInfo.userId); //关注检测  
                            that.addVideoList(that.videoList); //共分享页面 共享数据   

                            if(that.slideCurrentIndex==0){  
                                that.videoList[that.index].video.flag = false;  
                            }else{  
                                that.videoList[that.index].video.flag = true;  
                            }  
                        })  
                    }  
                },  
                fail: function(err) {  
                    uni.hideLoading();  
                }  
            })  
        },

操作步骤:
<swiper :style="{ height: height,width: width }" class="swiper" :vertical="true"  
                        @change.stop="changeCurrent" :current="index">  
                        <swiper-item :style="{ height: height,width: width }" v-for="(item, idx) in videoList"  
                            :key="idx" :item-id="idx" class="swiper-item" :skip-hidden-item-layout='true'  
                            :display-multiple-items='5'>  
                            <view v-if="Math.abs(index-idx)<=1" :style="{ height: height,width: width }">  
                                <lizhao-video v-if="Math.abs(index-idx)<=1" class="video" :src="item.video.url"  
                                    :height="height" :duration='item.video.duration' :width="width"  
                                    :poster='item.video.coverImg' :play="item.video.flag"  
                                    :short="item.video.videoHeight=='1024'?false:true">  
                                </lizhao-video>  

                                <!-- 控制上下滑动 暂停播放 -->  
                                <cover-view class="cover-view-marks">  
                                    <view :data-index='idx' :style="{ height: height,width: width }"  
                                        @touchmove="ListTouchMove" @touchend.stop="ListTouchEnd"  
                                        @touchstart="ListTouchStart">  
                                    </view>  
                                </cover-view>  
                                <cover-view class="cover-view-left" style="z-index:999">  
                                    <block>  
                                        <view class="goods" v-if="goods">  
                                            <image class="goods_img" :src="goods.itempic+'_310x310.jpg'"></image>  
                                            <view class="words">  
                                                <view class="words_top">  
                                                    <text class="goods_title">{{goods.itemtitle}}</text>  
                                                    <image class="goods_close" @click.stop="closeCard"  
                                                        src="../../static/close.png"></image>  
                                                </view>  
                                                <view class="words_bottom">  
                                                    <view class="w_left">  
                                                        <view class="w_bg">  
                                                            <text class="j">劵</text>  
                                                            <text class="w_price">{{goods.couponmoney}}元</text>  
                                                        </view>  
                                                        <view class="pri_wrap">  
                                                            <text class="red_word"> ¥{{goods.itemendprice}}</text>  
                                                            <text class="gry_pri">¥{{goods.itemprice}}</text>  
                                                        </view>  
                                                    </view>  
                                                    <text class="w_right" @click="shop(goods.itemid)">立即购买</text>  
                                                </view>  
                                            </view>  
                                        </view>  
                                    </block>  
                                    <view class="icon_wrap" @click.stop="bangDan(item)"  
                                        v-if="item.videoStatistics.giftGiveCount&&item.videoStatistics.giftGiveCount>0">  
                                        <image class="icon_shop" src="../../static/bangdan.png" mode="aspectFit">  
                                        </image>  
                                        <text class="icon_title">查看礼物榜单</text>  
                                        <!-- {{des}} -->  
                                    </view>  

                                    <view class="icon_wrap" @click.stop="singleGoods(item)">  
                                        <image class="icon_shop" src="../../static/shops.png" mode="aspectFit"></image>  
                                        <text class="icon_title">查看视频同款商品</text>  
                                        <!-- {{des}} -->  
                                    </view>  
                                    <view class="icon_wrap" v-if="item.video.city"  
                                        @click.stop="cityType(item)">  
                                        <image class="icon_position" src="../../static/position.png"></image>  
                                        <view class="iconGry"><text class="icon_title">{{item.video.city}}</text></view>  
                                    </view>  
                                    <text class="view-left-text"  
                                        v-if="item.userInfo.userName">{{item.userInfo.userName}}</text>  
                                    <view class="view-left-text-content" v-if="item.video.title">  
                                        <text class="text-content-text">{{item.video.title}}</text>  
                                        <text class="text-content-advert" v-if="false">广告</text>  
                                    </view>  
                                    <view style="flex-direction: row;" v-if="musicName" @click="clickMusic(item)">  
                                        <text class="iconfont view-left-icon musicicon">&#xe600;</text>  
                                        <view class="view-left-dubbedText" style="lines: 1; overflow: hidden; text-overflow: ellipsis;">  
                                            <text class="view-left-dubbedText-text" style="lines: 1; overflow: hidden; text-overflow: ellipsis;"  
                                                :style="{transform: `translateX(${translateX}px)`}" >{{musicName}}</text>  
                                        </view>  
                                    </view>  
                                    <view class="seedetails" v-if="false">  
                                        <text class="seedetails-text" @click="navigateTo(item.video.advertUrl)">查看详情  
                                            ></text>  
                                    </view>  
                                    <!-- 合集 -->  
                                    <view v-if="hejiShow && item.video.listName" class="icon_wrap heji"  
                                        :style="{width: width}" @click="heji(item)">  
                                        <image class="icon_shop" src="../../static/jihe.png" mode="aspectFit"></image>  
                                        <text class="icon_title hejiTitle"  
                                            style="width: 600upx;">合集·{{item.video.listName}}</text>  
                                        <image class="icon_shop hejiY" src="../../static/author/join.png"  
                                            mode="aspectFit"></image>  
                                    </view>  
                                </cover-view>  
                                <!-- 右下角图标 -->  
                                <cover-view class="cover-view-right">  
                                    <cover-image v-if="item.userInfo.userImg" :src="item.userInfo.userImg"  
                                        class="avater img" @click.stop="tapAvater(item.userInfo.userId)"></cover-image>  
                                    <cover-image v-else src="../../static/author/head.png" class="avater img"  
                                        @click.stop="tapAvater(item.userInfo.userId)"></cover-image>  
                                    <text class="right-follow" v-if="who=='other'&&item.videoStatistics.followCount==0"  
                                        @click="Follow(item.userInfo.userId)">+</text>  
                                    <cover-image  
                                        :src="item.video.check?'../../static/img/axc.png':'../../static/img/bed.png' "  
                                        class="img-left" @click.stop="tapLove"></cover-image>  
                                    <text class="right-text">{{item.videoStatistics.sumPraise}}</text>  
                                    <!-- 点击评论 -->  
                                    <cover-image src="../../static/img/ay2.png" style="height: 80upx;" class="img-left"  
                                        @click.stop="tapMsg"></cover-image>  
                                    <text class="right-text">{{item.videoStatistics.commentCount}}</text>  
                                    <!-- 点击转发 -->  
                                    <cover-image src="../../static/img/b6p.png" style="height: 76upx;" class="img-left"  
                                        @click.stop="tapShare(item)"></cover-image>  
                                    <text class="right-text">{{item.videoStatistics.shareCount}}</text>  
                                    <!-- 礼物 -->  
                                    <cover-image v-if="who=='other'" src="../../static/img/gift.png"  
                                        style="width:76upx;height: 66upx;" class="img-left" @click.stop="tapGift">  
                                    </cover-image>  
                                    <cover-image v-else src="../../static/img/gift.png"  
                                        style="width:76upx;height: 66upx;" class="img-left"></cover-image>  
                                    <text class="right-text">{{item.videoStatistics.giftGiveCount}}</text>  
                                    <!-- 同款  v-if="item.typeId" -->  
                                    <cover-image src="../../static/img/same.png" style="width:63upx;height: 54upx;"  
                                        class="img-left" @click.stop="same(item)">  
                                    </cover-image>  
                                </cover-view>  
                            </view>  

                        </swiper-item>  
                    </swiper>  

预期结果:

安卓和ios上下滑动顺畅,并且请求数据后滑动查看顺畅

实际结果:

ios上下滑动数据和请求追加数据顺畅,安卓滑动出现卡顿,每次追加完数据后,视频返回到了第一条

bug描述:

【报Bug】在swiper-item 中 安卓的视频上上下滑动有时会失效,ios的就正常 有没有大佬能回复解决下?并且请求数据时,查看视频时,ios是可以往后追加查看的,安卓滑动时就返回到了第一条数据

2021-05-07 15:16 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复