uni-app uni-swipe-action组件 使用插槽渲染按钮,IOS上点击按钮,操作错位

前两天使用了uni-app开发移动端,写了一个列表,需要有滑动显示按钮的功能,查阅uni-app官网 选择了扩展组件里面的uni-swipe-action组件来实现,组件具体的使用方法在这里不过多赘述,官网有最简单的例子。
下面来说我遇到的问题:由于列表的按钮是需要根据每一条数据的status来动态加载按钮的,所以我就选择了使用插槽的方式来渲染按钮


	
		
			
				
                    {{ item.Name }}-        
			        {{ item.Type}}
			    
				
                    {{ item.OrgProductListName }}
                
			
		    
		    
			    {{ statusObj[item.Status] }}
		    
		
		
	

uni-app uni-swipe-action组件 使用插槽渲染按钮,IOS上点击按钮,操作错位_第1张图片uni-app uni-swipe-action组件 使用插槽渲染按钮,IOS上点击按钮,操作错位_第2张图片

 在开发过程中没有任何问题,点击按钮能正确执行事件,但是,后来用真机来测试后,发现在安卓手机上没有问题,ios上就出现bug了,点击“维修”执行的是编辑的事件,点击编辑执行的是跳转详情页面(也就是说按钮操作错位了)。

于是我上网查看有没有人遇到过类似问题,查来查去没有看到有关文章,只有一篇报bug的【报Bug】uni-swipe-action 滑动操作 使用插槽多操作时IOS上操作错位 - DCloud问答

其他的都是换另一种实现方式,于是我就再去看官网,官网的例子还有一种实现方式是使用right-options来加载按钮,于是我就试一试这种方式,没想到解决问题了,在ios端测试了,点击按钮的时候,执行正确的事件,但由于我这里的按钮是需要动态加载的,所以按钮的options不能写死在data里面,我只能在请求到数据后,给列表的每一项动态添加btnOption


	
		
			
			    
                    {{ item.Name }}-
                    {{ item.Type}}
                
				
                    {{ item.OrgProductListName }}
                
			
			
			    
                    {{ statusObj[item.Status] }}
                
            
		
	

uni-app uni-swipe-action组件 使用插槽渲染按钮,IOS上点击按钮,操作错位_第3张图片

最后再进行测试,在ios端没有问题。

 

 

你可能感兴趣的:(uni-app,前端,vue)