SmileZXLee / uni-z-paging

【uni-app下拉刷新、上拉加载】高性能,全平台兼容。支持vue、nvue、vue2、vue3,使用wxs+renderjs实现。支持虚拟列表,支持自定义下拉刷新、上拉加载更多,支持自动管理空数据图、点击返回顶部,支持聊天分页、本地分页,支持国际化等100+项配置
https://z-paging.zxlee.cn
MIT License
875 stars 69 forks source link

微信小程序点击事件问题 #41

Closed ashuicoder closed 1 year ago

ashuicoder commented 1 year ago

代码如下:点击item的时候报错TypeError: Cannot read property 'id' of undefined,dataList的item里保证有id属性

<template>
    <view class="content">
        <z-paging ref="paging" v-model="dataList" @query="queryList">
            <view slot="top" class="bg-white mx-14 mt-14 p-14 rounded-4">
                <z-tabs :list="tabslist" @change="onChange"></z-tabs>
            </view>
            <view v-for="(item, index) in dataList" :key="itme.id" class="mt-14 bg-white rounded-4 px-14 mx-14"
                @click="handleItemClick(item.id)">
                <view class="border-b-1 border-solid border-border py-14">
                    {{item.orderNm}}
                </view>

                <view class="flex justify-between items-center py-14">
                    <view :class="orderStatusInfo[item.orderStatus].className">
                        {{orderStatusInfo[item.orderStatus].text}}
                    </view>
                    <view class="text-info">
                        {{$formateDate(item.addTime, 'YYYY-MM-DD HH:mm')}}
                    </view>
                    <view>
                        ¥ <text class="text-error text-20 font-medium">{{item.orderPrice}}</text>
                    </view>
                </view>
            </view>
        </z-paging>
    </view>
</template>

<script>
    import {
        fetchMyList
    } from '@/api/modules/my.js'
    import {
        orderStatusInfo
    } from '@/common/constant.js'
    export default {
        data() {
            return {
                dataList: [],
                searchText: '',
                orderStatusInfo,
                currentValue: 999,
                tabslist: [{
                        name: '全部',
                        value: 999
                    },
                    {
                        name: '待支付',
                        value: 101
                    },
                    {
                        name: '已支付',
                        value: 201
                    },
                    {
                        name: '已取消',
                        value: 102
                    },
                    {
                        name: '申请退款',
                        value: 202
                    },
                    {
                        name: '已退款',
                        value: 203
                    },
                    {
                        name: '已结束',
                        value: 401
                    }
                ]
            }
        },
        methods: {
            queryList(pageNo, pageSize) {
                const params = {
                    page: pageNo,
                    limit: pageSize,
                }
                if (this.currentValue !== 999) {
                    params.orderStatus = this.currentValue
                }
                fetchMyList(params).then(res => {

                    this.$refs.paging.complete(res.list);
                }).catch(res => {
                    this.$refs.paging.complete(false);
                })
            },
            onChange(_, value) {
                this.currentValue = value
                this.$refs.paging.reload()
            },
            handleItemClick(id) {
                uni.navigateTo({
                    url: `/pages/my/order/detail?id=${id}`
                })
            }
        }
    }
</script>

<style></style>
HEYlime commented 2 months ago

大佬怎么解决的