何欢丶
何欢丶
  • 发布:2022-03-23 09:42
  • 更新:2022-03-23 09:42
  • 阅读:392

【报Bug】同意页面引用相同组件有干扰

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.3.10

第三方开发者工具版本号: 1.05.2202282

基础库版本号: vue2.0

项目创建方式: HBuilderX

示例代码:
···<view class="activity" v-if="nCurrentTabIndex === 1"> <all-list class="u-flex u-flex-wrap good-active-box" ref="activityAllList" :params="oListParams"

contentClass="['u-flex', 'u-flex-wrap']" :setItemStyle="setItemStyle1"> <template #list-item="{item}">
<view class="u-flex u-flex-col item-activity u-m-b-24 good-active" @tap="fnOpenActInfo(item)">

                    <u-image class="item-activity-cover" :src="item.files | getCover"  
                        width="328" height="188">  
                        <view slot="error" style="font-size: 24rpx;">加载失败</view>  
                    </u-image>  
                    <view  
                        class="u-flex-1 item-activity-title u-font-28 u-main-color u-text-center u-line-2 active-title">  
                        {{item.contentTitle}}  
                    </view>  
                </view>  
            </template>  
        </all-list>  
    </view>  
    <view class="zyz" v-if="nCurrentTabIndex === 2">  
        <all-listIndex class="u-flex u-flex-wrap" ref="zyzAllList" :params="oListParams"  
contentClass="['u-flex', 'u-flex-wrap']" :setItemStyle="setItemStyle2"> <template #list-item="{item}">
<view class="item-zyz u-bg-color-white u-flex u-flex-col u-m-b-24 good-volueter"
@tap="fnOpenDetailVol(item)">
<view class="item-zyz-cover">
<u-image class="item-list-cover" :src="item.userIconCode | getFileUrl"
width="211" height="211">
<view slot="error" style="font-size: 24rpx;">加载失败</view>
</u-image>
</view>
<view class="u-font-24 u-main-color item-zyz-bottom">{{item.title}} </view>
</view>
</template>
</all-listIndex>
</view> ···
···· <template>
<view class="list-content-warp" :style="contentWarpStyle">
<view class="list-content" v-if="dataList.length" :class="contentClass">
<slot name="list-item" v-for="(item,index) in dataList" :item="item" :index="index"/>
<!--
<view class="list-item" v-for="(item,index) in dataList" :key="item.id || index" :style="setItemStyle(item, index)">
<slot name="list-item" :item="item" :index="index"/>
</view>
-->
</view>
<view class="list-status">
<u-loadmore v-if="!emptyStatus" :status="status" color="#e1e1e1" font-size="32" margin-top="20"
margin-bottom="20" @loadmore="getList" />
<u-empty v-else color="#e1e1e1" font-size="32" margin-top="40" />
</view>
</view>
</template>

<script>
export default {
name: "all-list",
props: {
params: {
type: Object,
default: () => ({})
},
contentClass: {
type: Object | Array,
default: null
},
contentWarpStyle: {
type: Object,
default: () => ({})
},
beforeData: {
type: Function,
default: null
},
setItemStyle: {
type: Function,
default: () => ({})
}
},
data() {
return {
status: 'loadmore', //加载前:loadmore 加载中:loading 没有数据:nomore
emptyStatus: false,
dataList: [],
pages: 1,
queryListParams: {
urlType: '',
page: 1,
size: 10
}
};
},
watch: {
params: {
handler(val){
for(let i in val){
this.queryListParams[i] = val[i];
}
},
deep: true,
immediate: true
}
},
methods: {
changeDataList(fn = () => {}, isRemove = false){
this.dataList = !isRemove ? this.dataList.map(fn) : this.dataList.filter(fn);
},
setParams(params = {}, isGetList = false) {
for (let i in params) {
this.queryListParams[i] = params[i];
}
this.$emit('update:params', this.queryListParams);
isGetList && this.getList('search');
},
setData(data = [], isEmpty) {
if (isEmpty) {
this.dataList = data
} else {
this.dataList = this.dataList.concat(data);
}
},
//请求列表
getList(type) {
this.status = 'loading'
this.emptyStatus = false
if(type === 'search'){
this.queryListParams.page = 1
this.dataList = []
}
this.$u.api.getAction(this.queryListParams).then(res => {
this.renderList(type, res);
}).catch(() => {
if (type === 'refresh') {
uni.stopPullDownRefresh()
}
this.status = 'loadmore'
this.isLoading = false;
})
},
//渲染列表
renderList(type, res) {
let data = [];
if (type === 'refresh') {
//下拉刷新
data = res ? res.data : []
uni.stopPullDownRefresh()
} else if (type === 'search') {
//搜索
data = res ? res.data : []
} else {
//上拉加载
data = this.dataList.concat(res ? res.data : [])
}
this.beforeData && (data = this.beforeData(data));
this.dataList = data;
this.pages = res ? res.pages : 1;
this.emptyStatus = !this.dataList.length;
if (this.queryListParams.page < this.pages) {
this.status = 'loadmore'
} else {
this.status = 'nomore'
}
this.isLoading = false;
},
// 加载更多
loadmore(params) {
if (this.isLoading) return;
this.setParams(params);
if (this.queryListParams.page < this.pages) {
this.isLoading = true;
this.queryListParams.page++;
this.getList()
}
},
// 刷新
refresh(params) {
this.setParams(params);
this.queryListParams.page = 1;
this.getList('refresh')
}
}
}
</script>

<style lang="scss" scoped>
.list-content-warp{
width: 100%;
padding: 23rpx 35rpx;
}

.list-status{  
    width: 100%;  
}  

</style>
···

操作步骤:

同一页面引用相同组件互相影响

预期结果:

可以正常渲染出文字和出图片

实际结果:

可以正常文字,却不能渲染图片

bug描述:

同一页面引用相同组互相冲突

2022-03-23 09:42 负责人:无 分享
已邀请:

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