2***@qq.com
2***@qq.com
  • 发布:2022-12-18 11:27
  • 更新:2024-01-05 15:12
  • 阅读:369

求助大佬,uniapp开发安卓app打包安装后,列表滑动渲染卡顿,有时还闪退,(内附视频)

分类:uni-app

app打包安装后,列表渲染卡顿,有时还闪退,如果没有图片就不会闪退或卡顿,图片用过原生的image渲染,也用过uview的u-image渲染(懒加载),均有当前问题,当前项目只是只有一个页面
!

2022-12-18 11:27 负责人:无 分享
已邀请:
2***@qq.com

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

http://h5.yxw.scyccs.com/test.mp4
视频链接

2***@qq.com

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

<template>
<view class="container">
<view class="main">
<view class="product">
<view class="product-content u-flex-between u-flex-wrap u-col-top">
<view class="li" v-for="(item,index) in recommendList" :key="index">
<u-image :src="item.base_cover_image" width="347rpx" height="347rpx" radius="21rpx 21rpx 0 0">
<template v-slot:loading>
<u-loading-icon></u-loading-icon>
</template>
</u-image>
<!-- <image :src="item.base_cover_image" class="imagestyle" mode="widthFix">
</image> -->
<view class="info">
<view class="name">{{item.name}}</view>
<view class="content u-flex-between">
<view class="price">¥{{item.price}}</view>
<view class="btn-content u-flex-between">
<view class="cart u-flex-center u-col-center">
<image src="/static/icon/gouwuche.png" class="imagestylecar" mode="widthFix">
</image>
</view>
<view class="buy">购买</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
recommendList: [],
page: 1,
loadStatus: 0,
total: 0,
}
},
onLoad() {
this.handrecommendList();
},
onShow() {},
methods: {
handrecommendList() {
uni.showLoading({
title: '加载中'
})
this.$http.post("product/recommendList", {
page: this.page,
}).then(res => {
uni.hideLoading()
this.recommendList = this.recommendList.concat(res.data.productList)
this.total = res.data.total;
}).catch(ex => {
this.$common.errorToast();
})
},
// 上拉加载
onReachBottom() {
if (this.total > this.recommendList.length) {
this.page++;
this.loadStatus = 2; // 上滑加载中
this.handrecommendList();
}
},
}
}
</script>

<style lang="scss">
page {
background-color: #EFEFEF;
}

.container {  
    height: 100%;  

    .main {  

        .product {  
            width: 710rpx;  
            padding: 0 20rpx 40rpx;  

            .product-content {  

                .loading {  
                    width: 347rpx;  
                    height: 347rpx;  
                    background-color: red;  
                }  

                .li {  
                    width: 347rpx;  
                    margin-bottom: 20rpx;  
                    background-color: #FFFFFF;  
                    border-radius: 21rpx;  

                    .imagestyle {  
                        width: 347rpx;  
                        min-height: 347rpx;  
                        max-height: 350rpx;  
                    }  

                    .info {  
                        padding: 20rpx 27rpx 13rpx 22rpx;  
                        border-radius: 0rpx 0rpx 21rpx 21rpx;  

                        .name {  
                            font-size: 26rpx;  
                        }  

                        .content {  
                            margin-top: 20rpx;  

                            .price {  
                                font-size: 26rpx;  
                                font-family: Microsoft YaHei;  
                                font-weight: 400;  
                                color: #F76E00;  
                                line-height: 50rpx;  
                            }  

                            .btn-content {  
                                width: 130rpx;  
                                height: 44rpx;  
                                background: #E95D2D;  
                                border-radius: 22rpx;  

                                .cart {  
                                    width: 65rpx;  
                                    height: 44rpx;  
                                    background: #F76E00;  
                                    border-radius: 22rpx 0rpx 0rpx 22rpx;  

                                    .imagestylecar {  
                                        width: 30rpx;  
                                        height: 30rpx;  
                                    }  
                                }  

                                .buy {  
                                    width: 65rpx;  
                                    height: 44rpx;  
                                    background: #E95D2D;  
                                    border-radius: 0rpx 22rpx 22rpx 0rpx;  
                                    font-size: 21rpx;  
                                    color: #FFFFFF;  
                                    line-height: 44rpx;  
                                    text-align: center;  
                                }  
                            }  
                        }  
                    }  
                }  
            }  
        }  
    }  
}  

</style>

6***@qq.com

6***@qq.com - 江河湖海

解决了吗

要回复问题请先登录注册