简柏林 / thingskit-app · Commits

Commit 16484f0c5236e21b6ffe4f9fccccbd5ed846b33c

Authored by sqy
1 parent a8d35317

fix:[DEFECT-352] 修复滚动问题

Inline Side-by-side
Showing 2 changed files with 68 additions and 81 deletions
1 1 <template>
2 2 <view class="command-record">
3   - <!-- 公共组件-每个页面必须引入 -->
4   - <public-module></public-module>
5   - <view class="search">
6   - <view>
7   - <view class="search-left"><u--input prefixIcon="search" placeholder="请输入名称搜索" shape="circle" @change="inputChanged"></u--input></view>
8   - </view>
9   - <view @click="openSearchDialog" class="search-right">
10   - <text>筛选</text>
11   - <image src="../../../static/shaixuan.png" />
12   - </view>
  3 + <view class="filter-button" @click="openSearchDialog">
  4 + <text>筛选</text>
  5 + <image src="../../../static/shaixuan.png" />
13 6 </view>
14   - <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
  7 +
  8 + <mescroll-uni ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback" height="700px">
15 9 <view @click="openCommandDetail(item)" class="list-item" v-for="(item, index) in list" :key="index">
16 10 <view class="item">
17 11 <view class="item-first">
... ... @@ -30,10 +24,10 @@
30 24 <view class="time">{{ format(item.createTime) }}</view>
31 25 </view>
32 26 </view>
33   - </mescroll-body>
  27 + </mescroll-uni>
34 28 <!-- 告警筛选 -->
35   - <u-popup @close="close" closeable bgColor="#fff" :show="show" mode="bottom" :round="20" @touchmove.stop.prevent="disabledScroll">
36   - <view class="filter" @touchmove.stop.prevent="disabledScroll">
  29 + <u-popup @close="close" closeable bgColor="#fff" :show="show" mode="bottom" :round="20" @touchmove.stop.prevent="disabledScroll">
  30 + <view class="filter" @touchmove.stop.prevent="disabledScroll">
37 31 <view class="filter-title"><text>筛选条件</text></view>
38 32 <FilterItem :filterList="issueStatus" title="下发状态" @clickTag="currentIndex => handleClickTag(currentIndex, issueStatus)"></FilterItem>
39 33 <view class="button-group">
... ... @@ -58,6 +52,7 @@
58 52 import FilterItem from '@/pages/device/FilterItem.vue';
59 53 import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
60 54 import { formatToDate } from '@/plugins/utils.js';
  55 +import { debounce } from '@/plugins/throttle.js';
61 56 export default {
62 57 mixins: [MescrollMixin],
63 58 components: {
... ... @@ -118,7 +113,7 @@ export default {
118 113 format(date) {
119 114 return formatToDate(date, 'YYYY-MM-DD HH:mm:ss');
120 115 },
121   - disabledScroll(){
  116 + disabledScroll() {
122 117 return;
123 118 },
124 119 /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
... ... @@ -184,7 +179,6 @@ export default {
184 179 },
185 180 confirmFilter() {
186 181 const issueStatus = this.issueStatus.find(item => item.checked);
187   - console.log('--------',this.tbDeviceId)
188 182 this.loadData(1, {
189 183 status: issueStatus.type ? issueStatus.type : undefined,
190 184 tbDeviceId: this.tbDeviceId
... ... @@ -205,76 +199,69 @@ export default {
205 199
206 200 <style lang="scss" scoped>
207 201 .command-record {
208   - padding: 0 20rpx;
209   - .search {
  202 + padding: 0 30rpx;
  203 + .filter-button {
  204 + font-size: 12px;
  205 + width: 160rpx;
  206 + height: 64rpx;
  207 + border-radius: 32rpx;
210 208 display: flex;
211   - justify-content: space-between;
212   - padding-bottom: 10rpx;
213   - border-bottom: 1px solid #f5f5f5;
214   - .search-left {
215   - width: 580rpx;
216   - background-color: #f8f9fa;
217   - border-radius: 200rpx;
218   - }
219   - .search-right {
220   - display: flex;
221   - align-items: center;
222   - text {
223   - color: #333;
224   - font-size: 14px;
225   - }
226   - image {
227   - width: 40rpx;
228   - height: 40rpx;
229   - }
  209 + justify-content: center;
  210 + align-items: center;
  211 + background: #f0f1f2;
  212 + color: #666;
  213 + image {
  214 + width: 28rpx;
  215 + height: 28rpx;
  216 + margin-left: 4rpx;
230 217 }
231 218 }
  219 +}
232 220
233   - .list-item {
234   - width: 690rpx;
235   - background-color: #fff;
236   - border-radius: 20rpx;
237   - margin: 0 auto;
238   - margin-bottom: 20rpx;
239   - color: #333;
240   - .item {
241   - padding: 30rpx;
242   - view {
243   - font-size: 14px;
244   - margin-bottom: 10rpx;
245   - }
246   - .time {
247   - margin-top: 20rpx;
248   - color: #999;
249   - }
250   - .item-first {
  221 +.list-item {
  222 + width: 690rpx;
  223 + background-color: #fff;
  224 + border-radius: 20rpx;
  225 + margin: 20rpx auto;
  226 + color: #333;
  227 + .item {
  228 + padding: 30rpx;
  229 + view {
  230 + font-size: 14px;
  231 + margin-bottom: 10rpx;
  232 + }
  233 + .time {
  234 + margin-top: 20rpx;
  235 + color: #999;
  236 + }
  237 + .item-first {
  238 + display: flex;
  239 + justify-content: space-between;
  240 + align-items: center;
  241 + font-size: 15px;
  242 + font-weight: 500;
  243 + align-items: center;
  244 + .item-right {
251 245 display: flex;
252   - justify-content: space-between;
  246 + justify-content: center;
253 247 align-items: center;
254   - font-size: 15px;
255   - font-weight: 500;
256   - align-items: center;
257   - .item-right {
258   - display: flex;
259   - justify-content: center;
260   - align-items: center;
261   - width: 104rpx;
262   - height: 36rpx;
263   - font-size: 10px;
264   - border-radius: 20rpx;
265   - }
266   - .item-fail {
267   - color: #848383;
268   - background-color: #84838325;
269   - }
270   - .item.success {
271   - color: #00c9a7;
272   - background-color: #00c9a725;
273   - }
  248 + width: 104rpx;
  249 + height: 36rpx;
  250 + font-size: 10px;
  251 + border-radius: 20rpx;
  252 + }
  253 + .item-fail {
  254 + color: #848383;
  255 + background-color: #84838325;
274 256 }
  257 + .item.success {
  258 + color: #00c9a7;
  259 + background-color: #00c9a725;
  260 + }
275 261 }
276 262 }
277 263 }
  264 +
278 265 .filter {
279 266 padding: 0 30rpx;
280 267 .filter-title {
... ...
... ... @@ -5,7 +5,7 @@
5 5 <image src="../../../static/shaixuan.png" />
6 6 </view>
7 7
8   - <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
  8 + <mescroll-uni ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback" height="700px">
9 9 <view @click="openDeviceDetail(item)" class="list-item" v-for="(item, index) in list" :key="index">
10 10 <view class="item">
11 11 <view class="item-first">
... ... @@ -56,9 +56,9 @@
56 56 <view class="time">{{ item.createdTime }}</view>
57 57 </view>
58 58 </view>
59   - </mescroll-body>
  59 + </mescroll-uni>
60 60 <!-- 告警筛选 -->
61   - <u-popup @close="close" closeable bgColor="#fff" :show="show" mode="bottom" :round="20" @touchmove.stop.prevent="disabledScroll">
  61 + <u-popup @close="close" closeable bgColor="#fff" :show="show" mode="bottom" :round="20" @touchmove.stop.prevent="disabledScroll">
62 62 <view class="filter" @touchmove.stop.prevent="disabledScroll">
63 63 <view class="filter-title"><text>筛选条件</text></view>
64 64 <FilterItem :filterList="alarmStatus" title="告警状态" @clickTag="currentIndex => handleClickTag(currentIndex, alarmStatus)"></FilterItem>
... ... @@ -224,7 +224,7 @@ export default {
224 224 };
225 225 },
226 226 methods: {
227   - disabledScroll(){
  227 + disabledScroll() {
228 228 return;
229 229 },
230 230 /*下拉刷新的回调 */
... ... @@ -409,4 +409,4 @@ export default {
409 409 }
410 410 }
411 411 }
412   -</style>
  412 +</style>
... ...