<template>
<scroll-view class="uni-flex-column content" scroll-y="true">
<uni-collapse accordion="true">
<block v-for="(item1,index1) in folderData" :key="item1.id">
<uni-collapse-item :title="item1.storeName" :rightText="item1.rightText">
<!-- <list1 :listData="item1.childList"></list1> -->
<block v-for="item in item1.childList" :key="item.id">
<view class="uni-flex item">
<view class="item-left">
<image :src="item.icon" mode="aspectFit"></image>
</view>
<view class="uni-flex-column item-center">
<view class="store-name">{{item.text}}</view>
<view class="uni-flex message">
<text>联系人:{{item.name}}</text>
<text class="phone-number" @tap="callPhone(item.phone)"> ({{item.phone}})</text>
</view>
<view class="address">{{item.address}}</view>
</view>
<view class="item-right">查看{{item.count}}次</view>
</view>
</block>
</uni-collapse-item>
</block>
</uni-collapse>
</scroll-view>
</template>
<script>
import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
export default {
components: {
uniCollapse,
uniCollapseItem
},
data() {
return {
folderData: [{
id: '0',
storeName: '深圳',
rightText: 100,
childList: [{
id: '00',
icon: '../../static/d.jpg',
text: 'dddd',
phone: '13100000000',
name: '张三',
address: '深圳',
count: 2
},
{
id: '01',
icon: '../../static/d.jpg',
text: 'dd',
phone: '13100000001',
name: '李四',
address: '深圳',
count: 1
}
]
}, {
id: '1',
storeName: '深圳',
rightText: 10,
childList: [{
id: '10',
icon: '../../static/d.jpg',
text: '古古怪怪给',
phone: '13100000010',
name: '张三',
address: '顶顶顶顶',
count: 2
},
{
id: '11',
icon: '../../static/d.jpg',
text: '嘻嘻嘻嘻嘻嘻嘻',
phone: '13100000011',
name: '李四',
address: '哎哎哎啊',
count: 1
}
]
}]
}
},
onLoad() {},
computed: {
},
methods: {
change(e) {
console.log(e)
},
callPhone(phoneNumber) {
uni.makePhoneCall({
phoneNumber: phoneNumber,
complete(e) {
uni.showModal({
content: 'test'
})
}
})
}
}
}
</script>
<style>
</style>
- 发布:2019-04-10 14:47
- 更新:2019-04-25 15:28
- 阅读:1576
页面中使用了折叠面板这个组件,在小程序开发工具中无法正常显示内容
1***@qq.com (作者)
微信没报错,所以不知道原因,谷歌控制台报错如下:
Property or method "listData" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
1***@qq.com (作者)
这个不是v-for循环的问题吧,如果把第二个v-for循环中的listData改为data属性下的一个值,就能正常显示,如果第二个v-for的数据是从外层v-for中动态得到的,就不能正常显示,不太明白
2019-04-10 15:21