物流详情: 修复信息展示hidden、禁掉下拉动画
Showing
2 changed files
with
49 additions
and
42 deletions
1 | <template> | 1 | <template> |
2 | - <Scroll ref="scroll" class="scroll-view" v-bind="attrMerge" v-on="listenerMerge"> | 2 | + <Scroll |
3 | + ref="scroll" | ||
4 | + class="scroll-view" | ||
5 | + v-bind="attrMerge" | ||
6 | + v-on="listenerMerge" | ||
7 | + > | ||
3 | <slot slot="default"></slot> | 8 | <slot slot="default"></slot> |
4 | <template slot="pulldown" slot-scope="props"> | 9 | <template slot="pulldown" slot-scope="props"> |
5 | - <div v-if="props.pullDownRefresh" | 10 | + <!-- <div |
11 | + v-if="props.pullDownRefresh" | ||
6 | class="pulldown-wrapper" | 12 | class="pulldown-wrapper" |
7 | - :style="props.pullDownStyle"> | 13 | + :style="props.pullDownStyle" |
14 | + > | ||
8 | <div class="pulldown-content"> | 15 | <div class="pulldown-content"> |
9 | <div v-show="props.beforePullDown"> | 16 | <div v-show="props.beforePullDown"> |
10 | <div id="beforePullDown"></div> | 17 | <div id="beforePullDown"></div> |
@@ -13,37 +20,35 @@ | @@ -13,37 +20,35 @@ | ||
13 | <div id="afterPullDown"></div> | 20 | <div id="afterPullDown"></div> |
14 | </div> | 21 | </div> |
15 | </div> | 22 | </div> |
16 | - </div> | 23 | + </div> --> |
17 | </template> | 24 | </template> |
18 | </Scroll> | 25 | </Scroll> |
19 | </template> | 26 | </template> |
20 | 27 | ||
21 | <script> | 28 | <script> |
22 | -import {Scroll} from 'cube-ui'; | 29 | +import { Scroll } from "cube-ui"; |
23 | 30 | ||
24 | export default { | 31 | export default { |
25 | - name: 'ScrollView', | 32 | + name: "ScrollView", |
26 | mounted() { | 33 | mounted() { |
27 | this.$nextTick(() => { | 34 | this.$nextTick(() => { |
28 | - this._initLottie(); | 35 | + // this._initLottie(); |
29 | }); | 36 | }); |
30 | }, | 37 | }, |
31 | computed: { | 38 | computed: { |
32 | attrMerge() { | 39 | attrMerge() { |
33 | - return Object.assign({}, | 40 | + return Object.assign( |
41 | + {}, | ||
34 | { | 42 | { |
35 | - scrollEvents: ['scroll'] | 43 | + scrollEvents: ["scroll"] |
36 | }, | 44 | }, |
37 | - this.$attrs, | 45 | + this.$attrs |
38 | ); | 46 | ); |
39 | }, | 47 | }, |
40 | listenerMerge() { | 48 | listenerMerge() { |
41 | - return Object.assign({}, | ||
42 | - this.$listeners, | ||
43 | - { | 49 | + return Object.assign({}, this.$listeners, { |
44 | scroll: this.onScroll.bind(this) | 50 | scroll: this.onScroll.bind(this) |
45 | - } | ||
46 | - ); | 51 | + }); |
47 | } | 52 | } |
48 | }, | 53 | }, |
49 | methods: { | 54 | methods: { |
@@ -57,31 +62,31 @@ export default { | @@ -57,31 +62,31 @@ export default { | ||
57 | this.lottieBefore.goToAndStop(0); | 62 | this.lottieBefore.goToAndStop(0); |
58 | } | 63 | } |
59 | } | 64 | } |
60 | - this.$emit('scroll', pos); | 65 | + this.$emit("scroll", pos); |
61 | }, | 66 | }, |
62 | forceUpdate(dirty) { | 67 | forceUpdate(dirty) { |
63 | this.$refs.scroll.forceUpdate(dirty); | 68 | this.$refs.scroll.forceUpdate(dirty); |
64 | }, | 69 | }, |
65 | _initLottie() { | 70 | _initLottie() { |
66 | - import(/* webpackChunkName: "lottie-web" */ 'lottie-web').then(lottie => { | 71 | + import(/* webpackChunkName: "lottie-web" */ "lottie-web").then(lottie => { |
67 | this.lottieBefore = lottie.loadAnimation({ | 72 | this.lottieBefore = lottie.loadAnimation({ |
68 | - container: document.getElementById('beforePullDown'), // the dom element that will contain the animation | ||
69 | - renderer: 'svg', | 73 | + container: document.getElementById("beforePullDown"), // the dom element that will contain the animation |
74 | + renderer: "svg", | ||
70 | loop: false, | 75 | loop: false, |
71 | autoplay: false, | 76 | autoplay: false, |
72 | - path: 'https://cdn.yoho.cn/mapp/lottie/ufo-pull-1227.json' // the path to the animation json | 77 | + path: "https://cdn.yoho.cn/mapp/lottie/ufo-pull-1227.json" // the path to the animation json |
73 | }); | 78 | }); |
74 | this.lottieAfter = lottie.loadAnimation({ | 79 | this.lottieAfter = lottie.loadAnimation({ |
75 | - container: document.getElementById('afterPullDown'), // the dom element that will contain the animation | ||
76 | - renderer: 'svg', | 80 | + container: document.getElementById("afterPullDown"), // the dom element that will contain the animation |
81 | + renderer: "svg", | ||
77 | loop: true, | 82 | loop: true, |
78 | autoplay: true, | 83 | autoplay: true, |
79 | - path: 'https://cdn.yoho.cn/mapp/lottie/ufo-refresh-1227.json' // the path to the animation json | 84 | + path: "https://cdn.yoho.cn/mapp/lottie/ufo-refresh-1227.json" // the path to the animation json |
80 | }); | 85 | }); |
81 | }); | 86 | }); |
82 | } | 87 | } |
83 | }, | 88 | }, |
84 | - components: {Scroll} | 89 | + components: { Scroll } |
85 | }; | 90 | }; |
86 | </script> | 91 | </script> |
87 | 92 |
@@ -4,7 +4,8 @@ | @@ -4,7 +4,8 @@ | ||
4 | ref="scroll" | 4 | ref="scroll" |
5 | :data="detailList" | 5 | :data="detailList" |
6 | :options="scrollOption" | 6 | :options="scrollOption" |
7 | - @pulling-down="onPullingDown"> | 7 | + @pulling-down="onPullingDown" |
8 | + > | ||
8 | <div class="logistics-wrapper"> | 9 | <div class="logistics-wrapper"> |
9 | <div class="header"> | 10 | <div class="header"> |
10 | <img class="step" alt="" :src="stageImgUrl" /> | 11 | <img class="step" alt="" :src="stageImgUrl" /> |
@@ -39,7 +40,10 @@ | @@ -39,7 +40,10 @@ | ||
39 | :key="i" | 40 | :key="i" |
40 | > | 41 | > |
41 | <span class="title">{{ detailInfo.title }}</span> | 42 | <span class="title">{{ detailInfo.title }}</span> |
42 | - <time-line :isGoingOn="i === 0" :deliveryList="detailInfo.detailList"> | 43 | + <time-line |
44 | + :isGoingOn="i === 0" | ||
45 | + :deliveryList="detailInfo.detailList" | ||
46 | + > | ||
43 | <template v-slot:content="{ detail: { miniFaultConfirm } }"> | 47 | <template v-slot:content="{ detail: { miniFaultConfirm } }"> |
44 | <div class="judge-content-wrapper" v-if="miniFaultConfirm"> | 48 | <div class="judge-content-wrapper" v-if="miniFaultConfirm"> |
45 | <p class="tip"> | 49 | <p class="tip"> |
@@ -92,12 +96,13 @@ | @@ -92,12 +96,13 @@ | ||
92 | </div> | 96 | </div> |
93 | </div> | 97 | </div> |
94 | </div> | 98 | </div> |
95 | - <template slot="pulldown" slot-scope="props"> | ||
96 | - <div v-if="props.pullDownRefresh" | 99 | + <!-- <template slot="pulldown" slot-scope="props"> |
100 | + <div | ||
101 | + v-if="props.pullDownRefresh" | ||
97 | class="cube-pulldown-wrapper" | 102 | class="cube-pulldown-wrapper" |
98 | - :style="props.pullDownStyle"> | ||
99 | - </div> | ||
100 | - </template> | 103 | + :style="props.pullDownStyle" |
104 | + ></div> | ||
105 | + </template> --> | ||
101 | </scroll-view> | 106 | </scroll-view> |
102 | </layout-app> | 107 | </layout-app> |
103 | </template> | 108 | </template> |
@@ -120,24 +125,25 @@ export default { | @@ -120,24 +125,25 @@ export default { | ||
120 | TimeLine, | 125 | TimeLine, |
121 | CountDown, | 126 | CountDown, |
122 | ScrollView, | 127 | ScrollView, |
123 | - Button, | 128 | + Button |
124 | }, | 129 | }, |
125 | data() { | 130 | data() { |
126 | return { | 131 | return { |
127 | - stageImgUrl: '', | 132 | + stageImgUrl: "", |
128 | imageUrls: [], | 133 | imageUrls: [], |
129 | scrollOption: { | 134 | scrollOption: { |
130 | pullDownRefresh: { | 135 | pullDownRefresh: { |
131 | threshold: 70, | 136 | threshold: 70, |
132 | - stop: 90 | 137 | + stop: 90, |
138 | + txt: "更新成功" | ||
133 | }, | 139 | }, |
134 | observeDOM: false, | 140 | observeDOM: false, |
135 | - pullUpLoad: false, | ||
136 | - }, | 141 | + pullUpLoad: false |
142 | + } | ||
137 | }; | 143 | }; |
138 | }, | 144 | }, |
139 | computed: { | 145 | computed: { |
140 | - ...mapState(['logisticInfo']), | 146 | + ...mapState(["logisticInfo"]), |
141 | platformName() { | 147 | platformName() { |
142 | const { expressType: type } = this.logisticInfo; | 148 | const { expressType: type } = this.logisticInfo; |
143 | 149 | ||
@@ -291,10 +297,6 @@ export default { | @@ -291,10 +297,6 @@ export default { | ||
291 | 297 | ||
292 | <style lang="scss" scoped> | 298 | <style lang="scss" scoped> |
293 | .logistics-wrapper { | 299 | .logistics-wrapper { |
294 | - height: calc(100vh - 90px); | ||
295 | - -webkit-box-orient: vertical; | ||
296 | - overflow-x: auto; | ||
297 | - | ||
298 | /deep/ .time-line-wrapper .time-line-item { | 300 | /deep/ .time-line-wrapper .time-line-item { |
299 | padding-right: 0; | 301 | padding-right: 0; |
300 | } | 302 | } |
@@ -348,7 +350,7 @@ export default { | @@ -348,7 +350,7 @@ export default { | ||
348 | 350 | ||
349 | .judge-count-down { | 351 | .judge-count-down { |
350 | color: #d0021b; | 352 | color: #d0021b; |
351 | - font-size: 12*2px; | 353 | + font-size: 12 * 2px; |
352 | display: inline-block; | 354 | display: inline-block; |
353 | } | 355 | } |
354 | 356 |
-
Please register or login to post a comment