7***@qq.com
7***@qq.com
  • 发布:2020-12-17 20:10
  • 更新:2021-03-12 15:46
  • 阅读:806

swiper组件,动态追加数据时安卓端会出现返回第一条重新加载数据,而不是从追加的数据中继续往下翻

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 2.9.11

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: 荣耀9x

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<template>
<!-- secondbeat 秒拍视频页面 -->
<view class="simple-douyin">
<view class="wrapper">
<uni-status-bar></uni-status-bar>
<view class="nav">
<!-- <text class="cst-iconfont back" @tap="back">抖券</text> -->
<image class="cst-iconfont back myback" @tap="back" src="../../static/secondbeat/right-jiantou.png" mode=""></image>
<text style="color: #fff;">秒拍</text>
<image src="/static/ljt1.png" style="width: 60rpx;height: 60rpx; top: 25rpx; right: 10rpx;" class="position-absolute " @click="removeVideo(item.id)"></image>
</view>

    </view>  
<!-- <list v-if="dataResult.length > 0 " class="simple-douyin-list" @loadmore="loadMore" offset-accuracy="1500px" @scroll="scroll" :loadmoreoffset="loadMoreHeight" :show-scrollbar="false" ref="listBox"

pagingEnabled="true"> <cell v-for="(items,indexs) in indexx" :style="boxStyle" :key="indexs"> -->

        <!-- 这里还要做是图片还是视频,显示图片还是视频 item.type 1为图片,2为视频 -->  
        <!-- http://video-haodanku-com.cdn.fudaiapp.com/6d9dcfec14edea824879b8fd6ff92d82.mp4?attname=16044546495015.mp4 满屏视屏 -->  
    <!--    <swiper     :duration="1000" :style="boxStyle" @change="change">  
            <swiper-item v-for="(item, i) in dataResult" :key="i">  

            </swiper-item>  

        </swiper> -->   
        <swiper  :duration="1000"  :style="boxStyle" @change="change" :current="index" >  
            <swiper-item v-for="(item, i) in dataResult" :key="i" >  
                <view v-if="item.type == 2 && Math.abs(current-i)<=1" >  
                    <simple-video class="videoBox"  :ref-id="item.id" :state="item.state" :src="item.path"  

boxStyle="boxStyle" v-if="Math.abs(current-i)<=1"></simple-video> </view>

                <view v-if="item.type == 1" class="myimg" style="flex: 1; width: 750rpx; background-color: #000000;">  
                    <image style="flex: 1; width: 750rpx; background-size: 100% 100%;" :src="item.path" mode="aspectFit"></image>  
                </view>  

                <view class="videoHover" v-if="item.type == 2" @click="tapVideoHover(item.state, $event)" :style="boxStyle">  
                    <image v-if="item.state == 'pause'" class="playState" src="../../static/secondbeat/play.png"></image>  
                </view>  
                <view class="item-right" @appear="videoKey = i">  
                    <!-- <image class="item-right-image" :src="item.itempic"></image> -->  

                    <!-- 头像 -->  
                    <view>   
                        <image class="myright face" @tap="jumpToUserpage(item.userId)" style="width: 90rpx;height: 90rpx;   
                        border-top-right-radius:63rpx; border-bottom-left-radius: 63rpx;border-bottom-right-radius: 63rpx;border-top-left-radius: 63rpx;    
                        " :src="item.headImageUrl" mode=""></image>  
                    </view>  
                <!--    <text class="cs-iconfont item-right-icon" @tap.stop="rightIcon('share', item)">&#xe624;</text>  
                    <text class="item-right-text" @tap.stop="rightIcon('share', item)">分享</text> -->  
                    <text class="item-right-text"></text>  

                    <!-- 凸 -->  
                    <!-- <text class="cs-iconfont item-right-icon" @tap.stop="rightIcon('buy', item)">&#xe603;</text> -->  
                    <!-- <text class="item-right-text" @tap.stop="rightIcon('buy', item)">购买</text> -->  
                    <view>  
                        <!-- <text class="myright tu" @tap="tu(i,item.id)">凸</text> -->  
                        <image class="myright tu" src="../../static/secondbeat/tu-wihte.png" @tap="tu(i,item.id,item.hasLike)" mode=""></image>  
                    </view>  
                    <text class="myright" style="margin-bottom: 30rpx;">{{item.likeAmount == null ? 0 : item.likeAmount }}</text>  

                    <!-- <text class="item-right-text"></text> -->  

                    <!-- 凹 -->  
                    <view >  
                        <!-- <text class="myright ao" @tap="ao(i,item.id)">凹</text> -->  
                        <image class="myright tu" src="../../static/secondbeat/ao-wihte.png" @tap="ao(i,item.id,item.hasFavorite)" mode=""></image>  
                    </view>  
                    <text class="myright">{{item.favoriteAmount == null ? 0 : item.favoriteAmount }}</text>  
                    <!-- <text class="cs-iconfont item-right-icon" @tap.stop="rightIcon('dow', item)">&#xe62d;</text> -->  
                    <!-- <text class="item-right-text" @tap.stop="rightIcon('dow', item)">下载</text> -->  
                </view>  
                <view class="item-bottom">  

                <!-- 标题+热门标题 -->  
                    <view style="display: flex; flex-direction: row; align-items: flex-end;">  
                        <text class="item-title">{{item.title}}</text>  
                        <view><text v-if="item.tags != null" class="mytags">{{item.tags}}</text></view>  
                    </view>  

                    <!-- 地点 -->  
                    <view v-if="item.address" style="display: flex; flex-direction: row; align-items: flex-end;">  
                        <image style="width: 30rpx; height: 30rpx;" src="../../static/secondbeat/didi.png" mode=""></image>  
                        <text class="item-desc s-wrap ">{{item.address}}</text>  
                    </view>  

                    <view v-if="item.address == null " style="display: flex; flex-direction: row; align-items: flex-end;">  
                        <text class="item-desc s-wrap "></text>  
                    </view>  

                    <view style="display: flex; flex-direction: row; align-items: flex-end;">  
                        <text class="item-desc s-wrap "></text>  
                    </view>  

                </view>  
            </swiper-item>  

        </swiper>  
<!--    </cell>  
</list> -->  

<!-- <view v-else class="myelse">  
    <text class="notMiaopai">该用户还没有发布秒拍</text>  
</view> -->   

</view>
</template>
<script>
var deviceInfo = uni.getSystemInfoSync();
import simpleVideo from '@/components/simple-video.nvue';
import dialog from '@/components/uni-popup/uni-popup.vue';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue';
// import $u from '@/uview-ui/libs/request/index.js'
export default {
data() {
return {
loadMoreHeight: deviceInfo.windowHeight * 2, // 触发 loadmore 事件所需要的垂直偏移距离 加载到剩余2个的时候 继续加载
dataResult: [],
page: 1,
videoKey: 0,
boxStyle: {
width: '750rpx',
height: deviceInfo.windowHeight + 'px'
},
// 用户id,上一页跳转传过来的
userId: '',
detail:{
id:0,
videoIndex:0,
userId:0

        },  
        //当前视频下标  
        current:0,  
        //上一个视频下标  
        oldCurrent:0,  
        //该用户的视频总数  
        total:0,  
        isGetArr:false  

    };  
},  
components: {  
    simpleVideo,  
    dialog,  
    uniNavBar,  
    uniStatusBar  
},  
watch: {  
    // videoKey(videoKey, old_k) {  
    //  console.log(videoKey,old_k,'+++++++++++++++++++++++');  
    //  this.dataResult[videoKey].state = 'play';  
    //  this.dataResult[old_k].state = 'stop';  
    // }  
    current(k,old_k){  
        console.log('k========================================',k)  
        console.log('watch--old_k==============================',old_k)  
        console.log(this.dataResult)  
        console.log(this.dataResult[k])  

        this.dataResult[k].state = 'play'  
        this.dataResult[old_k].state = 'stop'  
        console.log('this.videoList[k]',this.dataResult[k])  
        console.log(this.dataResult[old_k])  
    }  
},  
onLoad(options) {  
    this.detail = JSON.parse(options.detail)  
    console.log(this.detail)  
     this.userId = this.detail.userId  
     this.current = this.detail.videoIndex  
     this.oldCurrent = this.current  
     // this.isindex = this.current  
    this.getData(() => {  
        this.$nextTick(() => {  
            this.dataResult[this.current].state = 'play';  
        });  
    });  
},  
methods: {  

    //  
    scroll(e){  
        let index =[ {  
            index:1,  
            indexx:2  
        }]  
        this.indexx = [...this.indexx,...index]  

        console.log(e,'22222222222222222222222222222222',this.indexx.length)  
    },  
    ///  
    change(e){  
        this.current = e.detail.current  
        this.$nextTick(()=>{  
            for (let item of this.dataResult) {  
                item.state = 'pause'  
            }     
            this.dataResult[this.current].state = 'play'  
        })   
                this.page++  
                console.log('哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈11111111111111111',this.page)  
                this.addVideo()  
            // if(this.dataResult.length < this.total  && this.dataResult.length - index == 2){  

            //  this.page++  
            //  console.log('哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈11111111111111111',this.page)  
            //  this.addVideo()  

            // }  
        // console.log(e,']]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]')  
        // console.log(this.current,this.oldCurrent)  
        // if(!this.isGetArr){  
        //  this.current = e.detail.current  
        //  let index = this.current + 1  
        //  console.log(this.current,this.oldCurrent)  
        //  if(this.current != this.oldCurrent){  
        //          this.dataResult[this.oldCurrent].state = 'stop';  
        //          this.dataResult[this.current].state = 'play';  
        //          this.oldCurrent = this.current  
        //  }  
        //  if(this.dataResult.length < this.total  && this.dataResult.length - index == 2){  

        //      this.page++  
        //      console.log('哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈11111111111111111',this.page)  
        //      this.addVideo()  

        //  }  

        // }  
        // else{  
        //  this.current++  
        //  if(this.current != this.oldCurrent){  
        //          this.dataResult[this.oldCurrent].state = 'stop';  
        //          this.dataResult[this.current].state = 'play';  
        //          this.oldCurrent = this.current  
        //          this.isGetArr = false  
        //  }     
        // }   

        // this.videoKey = e.detail.current  
    },  
    removeVideo(id){  
        console.log(id)  
    },  
    // 点击凸,发送点赞请求,且凸数量+1  
    tu(index,id,hasLike){  
        // console.log(id)// 秒拍ID  
        const token = uni.getStorageSync('token')  
        // console.log(this.dataResult[index].likeAmount)  
        console.log(hasLike)  
        let url = !!!hasLike ? '/svideo/like' : '/svideo/like/cancel'  
        if(!!!hasLike){  
            uni.request({  
                url: 'https://api.tutu-inspire.com'+url,  
                method: 'POST',  
                data: {   
                    svideoId: id  
                },  
                header: {  
                    'Access-Token': token  
                },  
                success: res => {  
                    if (res.data.code == 10000) {  
                         console.log(res)  
                        this.dataResult[index].likeAmount += 1  
                        this.dataResult[index].hasLike = 1  
                    }  
                }  
            })  
        }  
        else{  
            uni.request({  
                url: 'https://api.tutu-inspire.com'+url,  
                method: 'POST',  
                data: {   
                    svideoId: id  
                },  
                header: {  
                    'Access-Token': token  
                },  
                success: res => {  
                    if (res.data.code == 10000) {  
                         console.log(res)  
                        this.dataResult[index].likeAmount -= 1  
                        this.dataResult[index].hasLike = 0  
                    }  
                }  
            })  
        }  

    },  

    // 点击凹,发送收藏请求,且凸数量+1  
    ao(index,id,hasFavorite){  
        // console.log(id)// 秒拍ID  
        const token = uni.getStorageSync('token')  

        let url = !!!hasFavorite ? '/svideo/favorite' : '/svideo/favorite/cancel'  
        //console.log(!!!hasFavorite)  
        if(!!!hasFavorite){  
            uni.request({  
                url: 'https://api.tutu-inspire.com'+url,  
                method: 'POST',  
                data: {  
                    svideoId: id  
                },  
                header: {   
                    'Access-Token': token  
                },  
                success: res => {  

                    if (res.data.code == 10000) {  
                        // console.log(res)  
                        this.dataResult[index].favoriteAmount += 1  
                        this.dataResult[index].hasFavorite = 1  

                    }  
                }  
            })  
        }  
        else{  
            uni.request({  
                url: 'https://api.tutu-inspire.com'+url,  
                method: 'POST',  
                data: {  
                    svideoId: id  
                },  
                header: {   
                    'Access-Token': token   
                },  
                success: res => {  

                    if (res.data.code == 10000) {  
                         console.log(res)  
                        this.dataResult[index].favoriteAmount -= 1  
                        this.dataResult[index].hasFavorite = 0  

                    }  
                }  
            })  
        }  

    },  
    //  
    addVideo(){  
        const token = uni.getStorageSync('token')  

        uni.request({  
            url: 'https://api.tutu-inspire.com/svideo',  
            method: 'GET',  
            data: {  
                pageNumber: this.page,  
                pageSize: 8,  
                userId: this.userId  
            },  
            header: {  
                'Access-Token': token  
            },  
            success: res => {  
                console.log(res)  
                if (res.data.code == 10000) {  
                     // console.log(res,'==================================')  
                     //视频总数  
                     this.total = res.data.data.total  
                     let newarr = []  
                    res.data.data.data.forEach((item, index) => {  
                    //   // console.log(res.data.data,"================",res.data.data.total)  
                        newarr.push(Object.assign(item, {  
                            state: 'pause'  
                        }))  
                    // this.dataResult.push(res.data.data.data)  
                    })  

                    this.dataResult = this.dataResult.concat(newarr)  

                         this.isGetArr = true  
                    // if (this.dataResult.length >= this.clearMax) {  
                    //  this.dataResult.splice(0, this.clearNum);  
                    // }  
                    // callback && callback();  
                    console.log(this.current,'=================')  
                }  

            }  
        })  
    },  

    // 跳转到用户页面  
    jumpToUserpage(userId){  

        const myuserid = uni.getStorageSync('myuserid')  
        // console.log(myuserid)  
        // console.log(userId)  

        // 用户id相同就是自身  
        if(userId == myuserid){  
            // console.log(123)  
            uni.switchTab({  
                url: '../mypage/mypage'  
            })  

        }else{  
            // console.log('abc')  
            // 不是自身,跳到对应的用户个人页面  
            uni.navigateTo({  
                url: '../userpage/userpage?userId='+userId  
            })  
        }  

    },  

    //点击播放&&暂停  
    tapVideoHover(state, event) {  
        console.log('state--', state);  
        if (state == 'play' || state == 'continue') {  
            this.dataResult[this.current].state = 'pause';  
        } else {  
            this.dataResult[this.current].state = 'continue';  
        }  
    },  

    getData(callback = e => {}) {  
        var page = this.page;  
        // uni.request({  
        //  url: `https://www.haodanku.com/trill/get_trill_items?min_id=${page}&back=15&douyin_cid=4`,  
        //  method: 'GET',  
        //  success: result => {  
        //      console.log(result)  
        //      result.data.data.forEach((item, index) => {  
        //          this.dataResult.push(Object.assign(item, { state: 'pause' }));  
        //      });  
        //      if (this.dataResult.length >= this.clearMax) {  
        //          this.dataResult.splice(0, this.clearNum);  
        //      }  
        //      callback && callback();  
        //  }  
        // });  

        const token = uni.getStorageSync('token')  

        uni.request({  
            url: 'https://api.tutu-inspire.com/svideo',  
            method: 'GET',  
            data: {  
                pageNumber: page,  
                pageSize: 8,  
                userId: this.userId  
            },  
            header: {  
                'Access-Token': token  
            },  
            success: res => {  
                console.log(res)  
                if (res.data.code == 10000) {  
                     console.log(res,'==================================')  
                     //视频总数  
                     this.total = res.data.data.total  
                    res.data.data.data.forEach((item, index) => {  
                         // console.log(res.data.data,"================",res.data.data.total)  
                        this.dataResult.push(Object.assign(item, {  
                            state: 'pause'  
                        }));  
                    })  

                    if (this.dataResult.length >= this.clearMax) {  
                        this.dataResult.splice(0, this.clearNum);  
                    }  
                    callback && callback();  

                }  

            }  
        })  

    },  

    // 返回上一页  
    back() {  
        uni.navigateBack({  
            delta: 1  
        })  
    }  
}  

};
</script>
<style lang="scss">
.simple-douyin {
flex: 1;
}

.simple-douyin-list {
width: 750rpx;
flex: 1;
}

.myelse{
width: 750rpx;
flex: 1;
background-color: #000;
// display: flex;
justify-content: center;
align-items: center;
}

.notMiaopai{
color: #fff;
}

.s-nowrap {
flex-direction: row;
flex-wrap: nowrap;
}

/flex 横向不换行/
/头部/
.wrapper {
position: fixed;
top: 25rpx;
width: 750rpx;
// height: 88rpx;
}

.nav {
position: relative;
height: 88rpx;
justify-content: center;
align-items: center;
}

.title {
color: #ffffff;
font-size: 34rpx;
}

.back {
position: absolute;
left: 20rpx;
color: #ffffff;
font-size: 40rpx !important;
width: 180rpx;
height: 60rpx;
line-height: 60rpx;
}
.myback{
width: 40rpx;
height: 40rpx;
}

.videoHover {
position: absolute;
top: 0;
left: 0;
flex: 1;
background-color: rgba(0, 0, 0, 0.1);
justify-content: center;
align-items: center;
}

.playState {
width: 80upx;
height: 80upx;
}

.item-right {
position: absolute;
right: 32rpx;
bottom: 296rpx;
text-align: center;
}

.myright{
color: #fff;
text-align: center;
font-size: 30rpx;
margin-top: 8rpx;
}

.ao,.tu{
width: 80rpx;
height: 80rpx;
// text-align: center;
// line-height: 80rpx;
// background-color: #aaa;
// border-radius: 50%;
}

.item-right-image {
width: 86rpx;
height: 86rpx;
border-radius: 43rpx;
margin-bottom: 32rpx;
}

.item-right-icon {
font-size: 60rpx;
color: #ffffff;
text-align: center;
margin-bottom: 10rpx;
}

.item-right-text {
font-size: 24rpx;
color: #ffffff;
text-align: center;
margin-bottom: 30rpx;
}

.item-bottom {
position: absolute;
left: 32rpx;
bottom: 32rpx;
}

.item-title {
// width: 500rpx;
font-size:42rpx;
color: #ffffff;
// font-weight: bold;
lines:1;
}

.mytags{
padding: 5rpx 20rpx;
color: #FFFFFF;
font-size: 28rpx;
margin-left: 6rpx;
background-color: #2B8EE6;
border-radius: 19rpx;
}

.item-desc {
width: 550rpx;
margin-top: 20rpx;
font-size: 26rpx;
color: #aaa;
margin-left: 20rpx;
}

.item-music {
margin-top: 20rpx;
flex-direction: row;
align-items: center;
}

.item-music-icon {
width: 32rpx;
height: 32rpx;
font-size: 32rpx;
color: #ffffff;
}

.item-music-icon {
color: #ffffff;
font-size: 32rpx;
}

.item-music-text {
width: 600rpx;
height: 32rpx;
line-height: 32rpx;
font-size: 26rpx;
color: #ffffff;
}

.item-bottom-cart {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 10rpx;
margin-bottom: 20rpx;
height: 60rpx;
line-height: 60rpx;
padding-left: 10rpx;
padding-right: 10rpx;
}

.item-title-cart {
color: #ffffff;
font-size: 26rpx;
height: 60rpx;
line-height: 60rpx;
margin-left: 10rpx;
}

.item-icon-cart {
color: #f9d119;
font-size: 26rpx;
height: 60rpx;
line-height: 60rpx;
font-weight: bold;
}

.find-popup {
width: 750rpx;
flex-direction: column;
flex: 1;
background-color: #ffffff;
height: 400rpx;
}

.share-title-text {
height: 60rpx;
line-height: 60rpx;
padding-top: 10rpx;
padding-bottom: 10rpx;
text-align: center;
color: #7e7e7e;
font-size: 30rpx;
}

.share-list {
width: 750rpx;
flex-direction: row;
justify-content: flex-start;
flex-wrap: nowrap;
flex: 1;
}

.share-icon {
width: 187rpx;
text-align: center;
height: 130rpx;
line-height: 130rpx;
font-size: 44rpx;
}

.text-center {
text-align: center;
}

.text-size {
font-size: 32rpx;
}

.margin-top {
margin-top: 35rpx;
}

.margin-top-xs {
margin-top: 10rpx;
}

.margin-top2 {
margin-top: 40rpx;
}

.tui-btn-cancle {
width: 750rpx;
height: 100rpx;
line-height: 100rpx;
position: absolute;
left: 0;
bottom: 0;
background-color: #f6f6f6;
align-items: center;
justify-content: flex-end;
}

.tui-btn-cancle-text {
width: 750rpx;
font-size: 33rpx;
color: #3e3e3e;
height: 100rpx;
line-height: 100rpx;
align-items: center;
justify-content: center;
text-align: center;
padding-bottom: 5rpx;
}

.weixin {
color: #30ca70;
}

.qq {
color: #1db2ed;
}

.pengyouquan {
color: #52ae71;
}

.kongjian {
color: #f2a141;
}

.bendi {
color: #515a6e;
}

.picture {
color: #808695;
}

.cstIconfontN {
text-align: center;
font-size: 75rpx;
}
</style>

操作步骤:

11

预期结果:

11

实际结果:

11

bug描述:

安卓会出现追加视频后有返回第一条数据重新执行,ios目前是没问题,求官方救救孩子吧

2020-12-17 20:10 负责人:无 分享
已邀请:
7***@qq.com

7***@qq.com (作者)

这是视频,bug在第二秒和第三秒,这里我做了请求然后把数据追加给swiper,但是他就出现回退到第一条了,后面是因为分页没有了就没有追加数据。

4***@qq.com

4***@qq.com

我也遇到这个问题,你怎么解决的

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