uView2.0 icon indicating copy to clipboard operation
uView2.0 copied to clipboard

cell点击事件失效

Open lizhen789 opened this issue 2 years ago • 0 comments

版本

2.0.33

重现步骤

这个代码中使用到了mescroll-uni插件的下拉刷新功能

<template>
	<view class="scroll-list">
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
			:fixed="false" offset="200">
			<slot :dataList='dataList'>
			</slot>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getDataList
	} from "@/utils/api.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		name: "scroll-list",
		props: {
			url: String,
			searchData: Object
		},
		data() {
			return {
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 20 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				// 列表数据
				dataList: [],
			};
		},
		watch: {
			searchData: {
				handler(newValue, oldValue) {
					this.reloadList()
				},
				deep: true
			}
		},
		methods: {

			/*上拉加载的回调*/
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条

				let pageData = {
					pageNum: pageNum,
					pageSize: pageSize,
				}
				let data = Object.assign(this.searchData, pageData)

				getDataList(this.url, data).then(res => {
					if (res.data && res.data.list) {
						//设置列表数据
						if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
						this.dataList = this.dataList.concat(res.data.list); //追加新数据
						this.mescroll.endBySize(res.data.list.length, res.data.count);
					}
				}).catch((err) => {
					console.error(err);
					this.mescroll.endErr()
				})
			},
			/*若希望重新加载列表,只需调用此方法即可(内部会自动page.num=1,再主动触发up.callback)*/
			reloadList() {
				this.mescroll.resetUpScroll();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-list {
		width: 100%;
		height: 100%;
	}
</style>

使用:

<scrollList url="device/page" :searchData="searchData">
	<template v-slot:default='{dataList}'>
		<u-cell :title="data.deviceName" v-for="data in dataList" :key="data.deviceName" @click="itemClick(data)"></u-cell>
	</template>
</scrollList>

第一次点击事件都是好的,当点击完毕会跳转到另一个界面,

itemClick(data) {
  console.log("itemClick", data);
  uni.navigateTo({
	  url: "/pages/xx/xx?data=" + JSON.stringify(data)
  })
},

当界面操作返回回来后,会刷新这个列表数据,这时,比如上次点击的是第2条数据,刷新后第2条数据没了,列表更新了,那么你再点击第3条数据就毫无反应,点击第1条数据就是正常的。

期望的结果是什么?

点击cell时都是有点击事件的

实际的结果是什么?

点击cell时事件异常

lizhen789 avatar Sep 16 '22 09:09 lizhen789