view.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  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">
  6. <scroll-view scroll-y="true" class="scroll-height">
  7. <dream :item="v" class="item"></dream>
  8. <view class="page-num" v-if="swiper.index != -1">P{{swiper.index+1}}</view>
  9. </scroll-view>
  10. </swiper-item>
  11. </swiper>
  12. </view>
  13. </gracePage>
  14. </template>
  15. <script>
  16. import gracePage from "@/lib/graceUI/components/gracePage.vue";
  17. import dream from "@/pages/dream/view/dream.vue";
  18. var graceRichText = require("@/lib/graceUI/jsTools/richText.js");
  19. export default{
  20. data() {
  21. return {
  22. id : 1,
  23. swiper : {
  24. index : 0,
  25. circular : false,
  26. },
  27. fetch: {
  28. items : []
  29. }
  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. },
  48. view : function() {
  49. this.Dever.location('dream/view?id=1');
  50. },
  51. getData : function() {
  52. this.Dever.get(this, 'app/collection/?l=api.getContent', {id:this.id});
  53. }
  54. },
  55. components:{
  56. gracePage,dream
  57. }
  58. }
  59. </script>
  60. <style>
  61. .container {
  62. position: absolute;
  63. height: 100%;
  64. width: 100%;
  65. left: 0;
  66. top: 0;
  67. }
  68. .swiper {
  69. width: 750rpx;
  70. height: 100%;
  71. }
  72. swiper-item>view{
  73. height: 100%;
  74. }
  75. swiper-item image{
  76. width: 750rpx;
  77. height: 100%;
  78. }
  79. .scroll-height {
  80. height:100%;
  81. }
  82. .page-num {
  83. position: fixed;
  84. right: 30rpx;
  85. bottom: 30rpx;
  86. width: 80rpx;
  87. height: 80rpx;
  88. background-color: rgba(0, 0, 0, 0.75);
  89. border-radius: 80rpx;
  90. color: #fff;
  91. font-size: 30rpx;
  92. line-height: 80rpx;
  93. text-align: center;
  94. z-index: 200;
  95. }
  96. .default{
  97. background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAArCAYAAACXblYnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjQxN0Y2QUNFMTZEMTFFODk5RkM5MDEzRUIwNTZBNzkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjQxN0Y2QURFMTZEMTFFODk5RkM5MDEzRUIwNTZBNzkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCNDE3RjZBQUUxNkQxMUU4OTlGQzkwMTNFQjA1NkE3OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCNDE3RjZBQkUxNkQxMUU4OTlGQzkwMTNFQjA1NkE3OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtTor7AAABAOSURBVHja7F0HuBXF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) no-repeat center center #e5e5e5;
  98. background-size: 256rpx 43rpx;
  99. }
  100. </style>