uniapp项目tabbar页面的编辑

首先,我有两个页面,一个是我的文章列表,在这里,有一个编辑按钮,我可以修改我的文章;
然后,有另一个页面,他的原身是发布文章的页面,现在将数据绑定上去,用来编辑文字内容。
那么我首先要将数据发送过去,这是难点之一;难点之二是,将相册组件的数据渲染出来。

第一个:
将数据发过去:
1.
我一开始用url传递,但是被告知,url传递一般是有限制的。
2.
后来我了解到事务总线,遂使用,但是没有使用relauch的事件响应,所以没有成功
3.后来我了解到,uniapp有自己的传递事件的api,遂使用,但是发现,我的页面是tabbar,所以用navigaTo是不可以的。而switchBar不可以传参,并且它的返回参数没有返回eventChannel对象,所以不行
4.我去搜tabbar怎么传参,别人是保存在缓存、或者app对象里面

随成功

第二个:
将数据成功显示:
1.我传过去的对象,他有Thumbnail,但是没有blob图像地址,而这个组件只能读取图像地址,怎么办呢:
要转换!

		this.article.AttachList.forEach(item => {
					if (item.FileType.slice(0, 5) == 'image') {
						const blob = new Blob([item.Thumbnail], {
							type: `{item.FileType}`
						})
						const blobUrl = URL.createObjectURL(blob)
						const newItem = {
							name: item.FileName,
							size: item.FileSize,
							thumb: blobUrl,
							type: item.FileType,
							url: blobUrl
						}
						this.fileImages.push(newItem)
					}

如此这般

2.那么现在我的数据正是指向这个控件的数据了,再添加图片的时候,会有原来的数据。


			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
				let lists = event.file instanceof Array ? [...event.file] : [event.file];
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						// status: 'uploading',
						// message: '上传中'
					})
				})
				console.log('lists', lists)
				this.fileImages.push(...lists); // 将 lists 添加到 fileImages 数组中
				console.log('fileImages', this.fileImages);


			},

为什么我的控件在页面里也没有渲染出来呢?是需要在这个控件的:fileList属性里面,将这个数组绑定进去,这样子这个图片才能正确显示
<u-upload :fileList=“fileImages” @afterRead=“afterRead” @delete=“deletePic” name=“1” multiple
:maxCount=“10”>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Uniapp中,当切换tabbar页面时,可能会出现页面刷新的问题。有几种解决方法可以尝试。 一种方法是在pages.json文件中设置原生tabbar,并在页面运行时隐藏原生tabbar,以解决闪烁问题。这可以通过在页面的onLoad或onShow生命周期函数中使用uni.hideTabBar()来实现。这样,当页面加载或显示时,原生tabbar将被隐藏,避免了页面刷新时的闪烁问题。\[1\] 另一种方法是将自定义tabbar的跳转方式改为uni.switchTab(),而不是使用navigator等其他跳转方式。使用uni.switchTab()可以确保底部tabbar页面切换时不会跟着刷新而闪烁。例如,可以使用uni.switchTab({ url: path })来实现tabbar的跳转。\[2\] 如果遇到无法使用原生tabbar实现的需求,可以考虑自行封装tabbar组件。在封装tabbar组件时,需要确保tabbar选项在页面切换时正确激活,并且有激活和非激活状态的样式。这样可以在页面切换时保持tabbar的正确状态,避免刷新问题。\[3\] 综上所述,可以通过设置原生tabbar并隐藏、使用uni.switchTab()跳转或自行封装tabbar组件来解决Uniapp中刷新tabbar页面的问题。 #### 引用[.reference_title] - *1* *3* [uniapp自定义tabbar](https://blog.csdn.net/weixin_45855502/article/details/129309134)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [uniapp 小程序使用自定义tabbar页面刷新闪烁问题](https://blog.csdn.net/gyl_sunshine/article/details/123233326)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值