Commit ee7b64ca2d068e4ace9565bf54f2ac3fb04decc5
1 parent
51986005
横向滚动改为CSS：white-space: nowrap;样式定义溢出不换行，停止使用：setScrollBox进行计算，看效果挺好的，安卓/iOS & 浏览器/微信都测试通过~
Showing
2 changed files
with
10 additions
and
3 deletions
src/components/horizList/horizList.less
| @@ -39,6 +39,8 @@ | @@ -39,6 +39,8 @@ | ||
| 39 | .scroll-box { | 39 | .scroll-box { |
| 40 | > .box { | 40 | > .box { |
| 41 | display: block; | 41 | display: block; |
| 42 | + white-space: nowrap; | ||
| 43 | + width: 100%; | ||
| 42 | .item-box { | 44 | .item-box { |
| 43 | padding-right: 40px; | 45 | padding-right: 40px; |
| 44 | &:first-child { | 46 | &:first-child { |
| @@ -57,6 +59,8 @@ | @@ -57,6 +59,8 @@ | ||
| 57 | padding-bottom: 26px; | 59 | padding-bottom: 26px; |
| 58 | > .box { | 60 | > .box { |
| 59 | display: block; | 61 | display: block; |
| 62 | + white-space: nowrap; | ||
| 63 | + width: 100%; | ||
| 60 | .item-box { | 64 | .item-box { |
| 61 | padding-right: 30px; | 65 | padding-right: 30px; |
| 62 | &:first-child { | 66 | &:first-child { |
| @@ -91,6 +95,8 @@ | @@ -91,6 +95,8 @@ | ||
| 91 | padding-bottom: 26px; | 95 | padding-bottom: 26px; |
| 92 | > .box { | 96 | > .box { |
| 93 | display: block; | 97 | display: block; |
| 98 | + white-space: nowrap; | ||
| 99 | + width: 100%; | ||
| 94 | .item-box { | 100 | .item-box { |
| 95 | padding-right: 30px; | 101 | padding-right: 30px; |
| 96 | &:first-child { | 102 | &:first-child { |
src/components/horizList/horizList.vue
| @@ -4,7 +4,8 @@ | @@ -4,7 +4,8 @@ | ||
| 4 | <div class="box" :class="'com-' + com + ' pid-' + pid"> | 4 | <div class="box" :class="'com-' + com + ' pid-' + pid"> |
| 5 | <div class="h-box"> | 5 | <div class="h-box"> |
| 6 | <div class="scroll-box" ref="scrollBox"> | 6 | <div class="scroll-box" ref="scrollBox"> |
| 7 | - <div class="box" :style="'width: ' + scrollItemBox + 'vw'"> | 7 | + <!-- <div class="box" :style="'width: ' + scrollItemBox + 'vw'"> --> |
| 8 | + <div class="box" :style="'width: ' + scrollItemBox + '%'"> | ||
| 8 | <div class="item-box" v-for="(item, index) in lists" :key="index"> | 9 | <div class="item-box" v-for="(item, index) in lists" :key="index"> |
| 9 | 10 | ||
| 10 | <!-- | 11 | <!-- |
| @@ -141,7 +142,7 @@ | @@ -141,7 +142,7 @@ | ||
| 141 | this.$nextTick(() => { | 142 | this.$nextTick(() => { |
| 142 | 143 | ||
| 143 | // 设置横向滚动 | 144 | // 设置横向滚动 |
| 144 | - this.setScrollBox(this.$refs.scrollBox); | 145 | + // this.setScrollBox(this.$refs.scrollBox); |
| 145 | }); | 146 | }); |
| 146 | } | 147 | } |
| 147 | } | 148 | } |
| @@ -155,7 +156,7 @@ | @@ -155,7 +156,7 @@ | ||
| 155 | this.$nextTick(() => { | 156 | this.$nextTick(() => { |
| 156 | 157 | ||
| 157 | // 设置横向滚动 | 158 | // 设置横向滚动 |
| 158 | - this.setScrollBox(this.$refs.scrollBox); | 159 | + // this.setScrollBox(this.$refs.scrollBox); |
| 159 | }); | 160 | }); |
| 160 | } | 161 | } |
| 161 | } | 162 | } |