inProcess.nvue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <template>
  2. <view class="wrapper">
  3. <image class="banner" src="../../../static/bg.png" mode=""></image>
  4. <view class="tabs">
  5. <view class="tab-box">
  6. <newsPage class="page-item" ref="pageRp"></newsPage>
  7. </view>
  8. </view>
  9. </view>
  10. </template>
  11. <script>
  12. import newsPage from './itemPage.nvue';
  13. export default {
  14. components: {
  15. newsPage
  16. },
  17. data() {
  18. return {
  19. newsid: "",
  20. tabClick: false, // true 表示是两次点击中的第一次点了 tabBar
  21. }
  22. },
  23. onTabItemTap(e) {
  24. // tab 点击时执行,此处直接接收单击事件
  25. // console.log(e)
  26. if (this.tabClick) { // 200ms 内再次点击
  27. // 这里就是模拟的双击事件,可以写类似数据刷新相关处理
  28. this.$refs.pageRp.requestParams.pageIndex = 1;
  29. this.$refs.pageRp.loadData(true);
  30. }
  31. this.tabClick = true
  32. setTimeout(() => {
  33. this.tabClick = false // 200ms 内没有第二次点击,就当作单击
  34. }, 200)
  35. },
  36. onNavigationBarButtonTap(e) {
  37. if(this.$refs.pageRp.dataList.length > 0){
  38. uni.navigateTo({
  39. url:'/pages/webview/popupNews',
  40. })
  41. }
  42. },
  43. onReady() {
  44. this.$refs.pageRp.loadData();
  45. },
  46. methods: {
  47. }
  48. }
  49. </script>
  50. <style>
  51. /* #ifndef APP-PLUS */
  52. page {
  53. width: 100%;
  54. min-height: 100%;
  55. display: flex;
  56. }
  57. /* #endif */
  58. .banner{
  59. width: 750rpx;
  60. height: 320rpx;
  61. position: fixed;
  62. top: 0;
  63. left: 0;
  64. right: 0;
  65. }
  66. .tabs {
  67. flex: 1;
  68. flex-direction: column;
  69. overflow: hidden;
  70. border-radius: 15px;
  71. position: fixed;
  72. top: 0;
  73. bottom: 0;
  74. left:20rpx;
  75. right: 20rpx;
  76. background-color: #fff;
  77. }
  78. .tab-bar {
  79. /* #ifdef APP-PLUS */
  80. width: 750rpx;
  81. /* #endif */
  82. height: 42px;
  83. flex-direction: row;
  84. /* #ifndef APP-PLUS */
  85. white-space: nowrap;
  86. /* #endif */
  87. }
  88. .scroll-view-indicator {
  89. position: relative;
  90. height: 2px;
  91. background-color: transparent;
  92. }
  93. .scroll-view-underline {
  94. position: absolute;
  95. top: 0;
  96. bottom: 0;
  97. width: 0;
  98. background-color: #007AFF;
  99. }
  100. .scroll-view-animation {
  101. transition-duration: 0.2s;
  102. transition-property: left;
  103. }
  104. .tab-bar-line {
  105. height: 1px;
  106. background-color: #cccccc;
  107. }
  108. .tab-box {
  109. flex: 1;
  110. }
  111. .swiper-item {
  112. flex: 1;
  113. flex-direction: column;
  114. }
  115. .page-item {
  116. flex: 1;
  117. flex-direction: row;
  118. position: absolute;
  119. overflow: hidden;
  120. left: 20rpx;
  121. padding:30rpx;
  122. top: 5rpx;
  123. right:20rpx;
  124. bottom: 0;
  125. }
  126. </style>