view.vue 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <template>
  2. <gracePage :customHeader="false">
  3. <view class="container" slot="gBody">
  4. <swiper class="swiper" @change="change" :circular="swiper.circular">
  5. <swiper-item v-for="(v, k) in fetch.items" v-if="v.data" :key="k" >
  6. <scroll-view scroll-y="true" scroll-x="true" class="scroll-height">
  7. <dream ref="dream" :index="k" :item="v" :control="control" class="item"></dream>
  8. </scroll-view>
  9. </swiper-item>
  10. </swiper>
  11. </view>
  12. </gracePage>
  13. </template>
  14. <script>
  15. import gracePage from "@/lib/graceUI/components/gracePage.vue";
  16. import dream from "@/pages/dream/view/dream.vue";
  17. var graceRichText = require("@/lib/graceUI/jsTools/richText.js");
  18. export default{
  19. data() {
  20. return {
  21. id : 1,
  22. swiper : {
  23. index : 0,
  24. circular : false,
  25. },
  26. fetch: {
  27. items : []
  28. },
  29. control : {}
  30. }
  31. },
  32. onLoad(option) {
  33. this.id = option.id;
  34. this.getData();
  35. },
  36. // 下拉刷新
  37. onPullDownRefresh: function() {
  38. this.getData();
  39. },
  40. // 重新加载
  41. onPullDownRefresh: function() {
  42. this.getData();
  43. },
  44. methods:{
  45. change : function(e) {
  46. this.swiper.index = e.detail.current;
  47. if (this.control) {
  48. var i = 0;
  49. for (i in this.control) {
  50. if (this.control[i].load) {
  51. if (this.swiper.index == i) {
  52. this.control[i].start();
  53. } else {
  54. this.control[i].stop();
  55. }
  56. }
  57. }
  58. }
  59. },
  60. view : function() {
  61. this.Dever.location('dream/view?id=1');
  62. },
  63. getData : function() {
  64. this.Dever.get(this, 'app/collection/?l=api.getContent', {id:this.id});
  65. }
  66. },
  67. components:{
  68. gracePage,dream
  69. }
  70. }
  71. </script>
  72. <style>
  73. .container {
  74. position: absolute;
  75. height: 100%;
  76. width: 100%;
  77. left: 0;
  78. top: 0;
  79. }
  80. .swiper {
  81. width: 750rpx;
  82. height: 100%;
  83. }
  84. swiper-item>view{
  85. height: 100%;
  86. }
  87. swiper-item image{
  88. width: 750rpx;
  89. height: 100%;
  90. }
  91. .scroll-height {
  92. height:100%;
  93. }
  94. </style>