- 发布：2020-12-17 20:10
- 更新：2020-12-17 20:42
- 阅读：118
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 2.9.11
手机系统： Android
手机系统版本号： Android 10
手机厂商： 华为
手机机型： 荣耀9x
页面类型： nvue
nvue编译模式： fast
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
秒拍{{item.likeAmount == null ? 0 : item.likeAmount }}{{item.favoriteAmount == null ? 0 : item.favoriteAmount }}{{item.title}}{{item.tags}}{{item.address}}
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 {
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
})
}
}
};
.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;
}
操作步骤：
11
11
预期结果：
11
11
实际结果：
11
11
bug描述：
安卓会出现追加视频后有返回第一条数据重新执行，ios目前是没问题，求官方救救孩子吧
1 个回复
786354126@qq.com (作者)
这是视频，bug在第二秒和第三秒，这里我做了请求然后把数据追加给swiper，但是他就出现回退到第一条了，后面是因为分页没有了就没有追加数据。