最近观看数据未渲染。通过v-if切换状态,或者不使用scroll-view可以渲染出来。
- 发布:2023-01-16 11:56
- 更新:2023-02-01 20:08
- 阅读:413
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 22H2
HBuilderX类型: 正式
HBuilderX版本号: 3.6.17
浏览器平台: 微信内置浏览器
浏览器版本: 微信开发者工具
项目创建方式: HBuilderX
App下载地址或H5⽹址: http://www.91laimi.com/#/pages/index/index
操作步骤:
预期结果:
渲染列表。
渲染列表。
实际结果:
列表未渲染
列表未渲染
bug描述:
scroll-view内部v-for循环,数据更新,但是视图未更新。
<template>
<view class="content">
<card title='最近观看'>
<scroll-view scroll-x class="scrollView" @scrolltolower="loadMore" v-if='!lastLookMovie.loading'>
<view class="scrollItem" v-for="(item,idnex) in lastLookMovie.list" :key='index'>
<movieBanner :banner='item.image' :current='item.chapter' :name='item.name' @click="lookCurrent(item)"></movieBanner>
</view>
<view class="scrollItem addMore">
<movieBanner isAdd banner='/static/icons/addMore.png' name='去看剧吧' @click="lookMore"></movieBanner>
</view>
</scroll-view>
</card>
<card title='我的追剧' customStyle='margin-top: 24rpx;'>
<view class="list">
<view class="listItem" v-for="(item,index) in followMovie.list" :key='index' @click.stop="lookCurrent(item)"><view class="left">
<movieBanner :banner='item.image' ></movieBanner>
</view>
<view class="movieInfo">
<view class="name">{{item.name}}</view>
<view class="lookItem">
上次看到第{{item.lastchapter}}集
<!-- #ifdef MP-WEIXIN -->
<view class="" @click.stop>
<u-button type="error" shape="circle" size="medium" :customStyle="{width:'180rpx',margin: 0,fontSize:'26rpx'}" @click="remindMe(item)">更新提醒</u-button>
</view>
<!-- #endif -->
</view>
<view class="movieState">
{{item.status === 1?'已完结':'连载中'}} | 更新至<text class="red">第{{item.totalchapter}}集</text>
</view>
</view>
</view>
<u-loading-icon v-if="followMovie.loading"></u-loading-icon>
<u-empty v-else-if="followMovie.list.length === 0"></u-empty>
<u-loadmore v-if="followMovie.list.length > 0" :status="status" fontSize="24rpx" color="#999999" />
</view>
</card>
</view>
</template>
<script setup>
import {ref,reactive,watch, unref} from 'vue'
import { onReachBottom, onShow,onShareAppMessage } from '@dcloudio/uni-app'
import request from '@/utils/request.js'
import shareOptions from '@/shareOptions/shareOptions.js'
const s = shareOptions()
onShareAppMessage(() => {
return s
})
// 最近观看
const lastLookMovie = reactive({
list:[],
pages:{
page:0,
count: 10
},
loading: false,
isEnd: false
})
const getLastViewMovie = () => {
if(lastLookMovie.loading) return;
lastLookMovie.loading = true;
request({
url:'mobile/collect/recent_view_list',
data: {
...lastLookMovie.pages
}
}).then(res => {
lastLookMovie.list = lastLookMovie.pages.page === 0 ?res:[...lastLookMovie.list,...res],
lastLookMovie.isEnd = res.length < lastLookMovie.pages.count
lastLookMovie.loading = false;
lastLookMovie.pages.page ++
}).catch(err => {
lastLookMovie.loading = false;
})
}
onShow(() => {
lastLookMovie.pages = {
page: 0,
count: lastLookMovie.list.length < 10 ? 10 :lastLookMovie.list.length
}
lastLookMovie.loading = false;
getLastViewMovie()
})
const loadMore = () => {
console.log(99999)
if(lastLookMovie.isEnd) return;
getLastViewMovie()
}
// 我的追剧
const status = ref('nomore');//loading / nomore
const followMovie = reactive({
status:'loading',
loading: false,
pages: {
page: 0,
count: 10
},
list:[]
})
const getFollowMovie = () => {
followMovie.loading = true;
request({
url:'mobile/collect/movie_subject_list',
data: {
...followMovie.pages
}
}).then(res => {
followMovie.list = followMovie.pages.page === 0 ?res:[...followMovie.list,...res]
followMovie.status = res.length < followMovie.pages.count?'nomore':'loading'
followMovie.pages.page ++;
followMovie.loading = false;
}).catch(err => {
followMovie.loading = true;
})
}
onShow(() => {
followMovie.pages = {
page: 0,
count: followMovie.list.length < 10 ? 10 :followMovie.list.length
}
followMovie.loading = false;
getFollowMovie()
})
onReachBottom(() => {
if(followMovie.status === 'nomore' || followMovie.loading) return;
getFollowMovie()
})
// 看剧
const lookCurrent = (item) => {
uni.navigateTo({
url:`/pages/movie/movie?id=${item.id}&chapter=${item.lastchapter || item.chapter}`
})
}
// 更新提醒
const remindMe = (item) => {
// #ifdef MP-WEIXIN
getApp().globalData.subscribe()
// #endif
}
// 看更多
const lookMore = () => {
uni.switchTab({
url:'/pages/theatre/theatre'
})
}
</script>
<style lang="scss" scoped>
.content {
padding: 24rpx;
.card {
background-color: #fff;
padding: 20rpx;
box-shadow: 1rpx 1rpx 2rpx rgba(200, 200, 200, 0.2);
border-radius: 16rpx;
box-sizing: border-box;
.title {
font-weight: 600;
font-size: 32rpx;
color: #333333;
margin-bottom: 20rpx;
}
}
.scrollView {
width: 100%;
white-space: nowrap;
.scrollItem {
display: inline-block;
width: 180rpx;
&+.scrollItem {
margin-left: 20rpx;
}
.bannerBox {
width: 100%;
position: relative;
height: 100%;
border-radius: 10rpx;
overflow: hidden;
.banner {
width: 100%;
height: 100%;
}
.currentLook {
position: absolute;
left: 0;
bottom: 0;
z-index: 2;
width: 100%;
$h: 100rpx;
height: $h;
color: #ffffff;
padding-top: 55rpx;
box-sizing: border-box;
line-height: 2;
font-size: 20rpx;
text-align: center;
background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.8)) ;
@include textOverflow;
}
}
.name {
font-size: 28rpx;
color: #333333;
text-align: center;
margin-top: 10rpx;
font-weight: 600;
@include textOverflow;
}
&.addMore {
.bannerBox {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border: 2rpx solid #c8c8c8;
.add {
$s: 120rpx;
width: $s;
height: $s;
}
}
}
}
}
.list {
.listItem {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 20rpx 0;
.left {
flex-shrink: 0;
width: 180rpx;
border-radius: 8rpx;
margin-right: 30rpx;
overflow: hidden;
.banner {
width: 100%;
height: 100%;
}
}
.movieInfo {
flex: 1;
.name {
font-size: 28rpx;
font-weight: 600;
margin-bottom: 30rpx;
}
.lookItem {
font-size: 24rpx;
color: $uni-text-color-grey;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
}
.movieState {
font-size: 24rpx;
color: $uni-text-color-disable;
.red {
color: $uni-color-error;
}
}
}
}
}
}
</style>
好多bug啊 (作者)
逼得自己写了一个h5的scrollView
2023-01-16 17:20