uni-app 自定义组件循环slot在百度小程序异常
uni-app 自定义组件循环slot在百度小程序异常
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Windows | 10 | HBuilderX |
产品分类:uniapp/App
PC开发环境操作系统:Windows
HBuilderX类型:正式
HBuilderX版本号:4.45
手机系统:Android
手机系统版本号:Android 15
手机厂商:华为
页面类型:vue
vue版本:vue3
打包方式:云端
项目创建方式:HBuilderX
示例代码:
<template>
<view class="container container335134">
<u-form-item labelWidth="auto" class="diygw-col-24" label="复选按钮" labelPosition="top" prop="ucheckbox">
<diy-checkbox class="diygw-col-24" mode="checkbox" v-model="ucheckbox" :list="ucheckboxDatas" @change="changeUcheckbox"> </diy-checkbox>
</u-form-item>
<u-form-item labelWidth="auto" class="diygw-col-24" label="反馈类型" labelPosition="top" prop="ucheckbox1">
<diy-checkbox class="diygw-col-24" radius="8px" col="6" mode="radio" v-model="ucheckbox1" :list="questionTypes1" @change="changeUcheckbox1">
<template v-slot:item="{ item, index }" >
<view class="flex text-left flex-content diygw-col-24">
<view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex1-clz">
<text class="flex icon1 diygw-col-0" :class="[item.icon]"></text>
<text class="diygw-col-0 text-clz">
{{ item.title }}
</text>
</view>
</view>
</template>
</diy-checkbox>
</u-form-item>
<view class="clearfix"></view>
</view>
</template>
<script>
export default {
data() {
return {
//用户全局信息
userInfo: {},
//页面传参
globalOption: {},
//自定义全局变量
globalData: { isshow: false },
swipersNum: 1,
swipers: {
rows: [
{
id: 0,
title: '',
remark: '',
img: '',
path: null,
userId: 0,
createTime: '',
updateTime: '',
deleteTime: null
}
],
total: 0,
code: 0,
msg: ''
},
noticesNum: 1,
notices: {
rows: [
{
id: 0,
title: '',
remark: '',
userId: 0,
createTime: '',
updateTime: '',
deleteTime: null
}
],
total: 0,
code: 0,
msg: ''
},
huodongsNum: 1,
huodongs: {
rows: [
{
id: 0,
title: '',
remark: '',
starttime: null,
endtime: '',
address: null,
num: 0,
views: 0,
baomingnum: 0,
imgs: null,
img: '',
content: '',
fields: '',
userId: 0,
createTime: '',
updateTime: '',
deleteTime: null,
baomingEndtime: null
}
],
total: 0,
code: 0,
msg: ''
},
ucheckboxDatas: [
{ value: '1', label: '选项一', disabled: false },
{ value: '2', label: '选项二', disabled: false },
{ value: '3', label: '选项三', disabled: false }
],
ucheckbox: ['1'],
questionTypes1: [
{ value: '1', icon: 'diy-icon-safe', title: '上传' },
{ value: '2', icon: 'diy-icon-pic', title: '识别'},
{ value: '3', icon: 'diy-icon-mail', title: '其他' },
{ value: '4', icon: 'diy-icon-home', title: '首页' }
],
ucheckbox1: '1'
};
},
onShow() {
this.setCurrentPage(this);
},
onLoad(option) {
this.setCurrentPage(this);
if (option) {
this.setData({
globalOption: this.getOption(option)
});
}
this.init();
},
methods: {
async init() {
this.swipersApi();
this.noticesApi();
await this.huodongsApi();
},
// 轮播数据 API请求方法
async swipersApi(param) {
let thiz = this;
param = param || {};
//请求地址及请求数据,可以在加载前执行上面增加自己的代码逻辑
let http_url = '/cms/api.swiper/list';
let http_data = {
pageNum: this.swipersNum,
pageSize: 10,
pageSize: param.pageSize || '5'
};
let http_header = {};
let swipers = await this.$http.post(http_url, http_data, http_header, 'json');
this.swipers = swipers;
this.globalData.isshow = true;
},
// 公告数据 API请求方法
async noticesApi(param) {
let thiz = this;
param = param || {};
//请求地址及请求数据,可以在加载前执行上面增加自己的代码逻辑
let http_url = '/cms/api.notice/list';
let http_data = {
pageNum: this.noticesNum,
pageSize: 10,
pageSize: param.pageSize || '5'
};
let http_header = {};
let notices = await this.$http.post(http_url, http_data, http_header, 'json');
this.notices = notices;
},
// 活动数据 API请求方法
async huodongsApi(param) {
let thiz = this;
param = param || {};
//如果请求要重置页面,请配置点击附加参数refresh=1 增加判断如输入框回调param不是对象
if (param.refresh || typeof param != 'object') {
this.huodongsNum = 1;
}
//请求地址及请求数据,可以在加载前执行上面增加自己的代码逻辑
let http_url = '/cms/api.huodong/list';
let http_data = {
pageNum: this.huodongsNum,
pageSize: 10
};
let http_header = {};
http_data.baomingEndtime_gt = this.$tools.formatDateTime(new Date());
let huodongs = await this.$http.post(http_url, http_data, http_header, 'json');
let datarows = huodongs.rows;
if (http_data.pageNum == 1) {
this.huodongs = huodongs;
} else if (datarows) {
let rows = this.huodongs.rows.concat(datarows);
huodongs.rows = rows;
this.huodongs = Object.assign(this.huodongs, huodongs);
}
if (datarows && datarows.length > 0) {
this.huodongsNum = this.huodongsNum + 1;
}
this.globalData.isshow = true;
},
// 打开链接 自定义方法
async openFunction(param) {
let thiz = this;
let path = param && (param.path || param.path == 0) ? param.path : thiz.item.path || '';
if (path) {
this.navigateTo({
type: 'page',
url: path
});
}
},
changeUcheckbox(evt) {},
changeUcheckbox1(evt) {}
},
onPullDownRefresh() {
// 活动数据 API请求方法
this.huodongsNum = 1;
this.huodongsApi();
uni.stopPullDownRefresh();
},
onReachBottom() {
// 活动数据 API请求方法
this.huodongsApi();
}
};
</script>
<style lang="scss" scoped>
.flex1-clz {
padding-top: 16rpx;
padding-left: 16rpx;
padding-bottom: 16rpx;
padding-right: 16rpx;
}
.icon1 {
font-size: 64rpx;
}
.text-clz {
margin-left: 0rpx;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 0rpx;
}
.container335134 {
}
</style>
更多关于uni-app 自定义组件循环slot在百度小程序异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
这是一个百度小程序中slot循环渲染的兼容性问题。问题出在自定义组件diy-checkbox
的slot作用域上。
在百度小程序中,循环slot的作用域变量传递存在限制。建议尝试以下解决方案:
-
修改自定义组件
diy-checkbox
的实现,确保在百度小程序环境下正确传递slot作用域变量 -
或者改用更简单的slot使用方式,避免在循环中使用作用域slot:
<diy-checkbox ...>
<view v-for="(item, index) in questionTypes1" :key="index">
<view class="flex text-left...">
<!-- 内容 -->
</view>
</view>
</diy-checkbox>
-
检查百度小程序基础库版本,确保是最新版
-
如果问题仍存在,可以考虑在百度小程序环境下使用条件编译单独处理:
<!-- #ifdef MP-BAIDU -->
<!-- 百度专用实现 -->
<!-- #endif -->