list.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template>
  2. <view class="container">
  3. <unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" collection="opendb-feedback" field="content,imgs,contact,mobile">
  4. <view v-if="error">{{error.message}}</view>
  5. <view v-else-if="data">
  6. <uni-list>
  7. <uni-list-item v-for="(item, index) in data" :key="index" showArrow :clickable="true" @click="handleItemClick(item._id)">
  8. <template v-slot:body>
  9. <text>
  10. <!-- 此处默认显示为_id,请根据需要自行修改为其他字段 -->
  11. <!-- 如果使用了联表查询,请参考生成的 admin 项目中 list.vue 页面的绑定字段的写法 -->
  12. {{item._id}}
  13. </text>
  14. </template>
  15. </uni-list-item>
  16. </uni-list>
  17. </view>
  18. <uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
  19. </unicloud-db>
  20. <uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. data() {
  26. return {
  27. loadMore: {
  28. contentdown: '',
  29. contentrefresh: '',
  30. contentnomore: ''
  31. }
  32. }
  33. },
  34. onPullDownRefresh() {
  35. this.$refs.udb.loadData({
  36. clear: true
  37. }, () => {
  38. uni.stopPullDownRefresh()
  39. })
  40. },
  41. onReachBottom() {
  42. this.$refs.udb.loadMore()
  43. },
  44. methods: {
  45. handleItemClick(id) {
  46. uni.navigateTo({
  47. url: './detail?id=' + id
  48. })
  49. },
  50. fabClick() {
  51. // 打开新增页面
  52. uni.navigateTo({
  53. url: './opendb-feedback',
  54. events: {
  55. // 监听新增数据成功后, 刷新当前页面数据
  56. refreshData: () => {
  57. this.$refs.udb.loadData({
  58. clear: true
  59. })
  60. }
  61. }
  62. })
  63. }
  64. }
  65. }
  66. </script>
  67. <style>
  68. </style>