uni-app踩坑日记 ＜uni-list-item @tap=“fn“＞点击无效 + 动态传参

Posted 2022-02-05 Rudon滨海渔村

[20220112更新]

简单点击跳转的方法

<template>
	<view class="container">
        <uni-list>
            <uni-list-item title="简单跳转页面" to="/pages/detail/detail"></uni-list-item>
			
            <uni-list-item title="简单跳转页面 - 带变量" :to="'/pages/detail/detail?product='+pid"></uni-list-item>

            <uni-list-item title="reLaunch 方式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>

            <uni-list-item title="开启点击反馈" clickable  @click="onClick" ></uni-list-item>

            <uni-list-item title="默认 navigateTo 方式跳转页面" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
        </uni-list>
    </view>
</template>



<script>
    export default 
		data() 
			return 
				pid: 10086
			
		,
		methods: 
			
		
	
</script>

<style></style>

 官网手册写得。。nice。。

报错

HBuilderX（v3.3.5.20211229）预览，点击无效
问题1 <uni-list-item @tap="fn"> 无法触发
问题2
<uni-list-item
@tap="fn"
v-for="(item,index) in news"
:key="item.post_id" 
:title="item.title"
:data-id="item.post_id">
无法通过方法e.currentTarget.dataset.id获取参数

解决办法

【无法tap点击】
给标签添加link属性即可

<uni-list-item title="文字" @tap="fn" link></uni-list-item>

【无法通过data-xxx传参给函数】
直接硬生生的传参就行，无需data-xxx了

        <uni-list>
            <uni-list-item 
            v-for="(item,index) in news" 
            :key="item.post_id" 
            :title="item.title" 
            :note="item.created_at" 
            :thumb="item.cover" 
            thumbSize="lg" 
            @tap="fnTap(item.post_id)"
            link>
            </uni-list-item>
        </uni-list>

       methods:
            fnTap: function(newsID)
                console.log('fnTap');
                console.log(newsID);
                // console.log(JSON.stringify(e));
                // console.log(e.currentTarget.dataset.postid);
            
        ,

 @tap、@click都行

无效的解决办法

使用 native 修饰符
2019-04-28 12:23
https://ask.dcloud.net.cn/question/69025

完整成功代码

<template>
	<view class="container">
		<uni-list>
			<uni-list-item 
			v-for="(item,index) in news" 
			:key="item.post_id" 
			:title="item.title" 
			:note="item.created_at" 
			:thumb="item.cover" 
			thumbSize="lg" 
			@tap="fnTap(item.post_id)"
			link>
			</uni-list-item>
		</uni-list>
		
	</view>
</template>

<script>
	export default 
		data() 
			return 
				news: []
			
		,
		methods: 
			fnTap: function(newsID)
				console.log('fnTap');
				console.log(newsID);
				// console.log(JSON.stringify(e));
				// console.log(e.currentTarget.dataset.postid);
			
		,
		onLoad () 
			uni.request(
				url: 'https://unidemo.dcloud.net.cn/api/news',
				method: 'GET',
				data: ,
				success: res => 
					console.log('https://unidemo.dcloud.net.cn/api/news')
					uni.hideLoading();
					console.log(res.data.length);
					this.news = res.data;
				,
				fail: () => ,
				complete: () => 
			);
		
		
		
	
</script>

<style>
</style>