好多bug啊
好多bug啊
  • 发布:2023-01-16 11:56
  • 更新:2023-02-01 20:08
  • 阅读:413

【报Bug 打包h5项目,scroll-view内包裹元素用v-for渲染的时候,数据更新无法触发视图更新

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.6.17

浏览器平台: 微信内置浏览器

浏览器版本: 微信开发者工具

项目创建方式: HBuilderX

App下载地址或H5⽹址: http://www.91laimi.com/#/pages/index/index

操作步骤:

最近观看数据未渲染。通过v-if切换状态,或者不使用scroll-view可以渲染出来。

预期结果:

渲染列表。

实际结果:

列表未渲染

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>

2023-01-16 11:56 负责人:无 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

已知问题,会在下个版本修复

  • 好多bug啊 (作者)

    逼得自己写了一个h5的scrollView

    2023-01-16 17:20

8***@qq.com

8***@qq.com

能不能快点修复啊,我也遇到了。。。

要回复问题请先登录注册