w-front-end / select_good · Commits

Commit ee7b64ca2d068e4ace9565bf54f2ac3fb04decc5

Authored by 王强
1 parent 51986005

横向滚动改为CSS：white-space: nowrap;样式定义溢出不换行，停止使用：setScrollBox进行计算，看效果挺好的，安卓/iOS & 浏览器/微信都测试通过~

Inline Side-by-side
Showing 2 changed files with 10 additions and 3 deletions
src/components/horizList/horizList.less
  View file @ee7b64c
... ... @@ -39,6 +39,8 @@
39 39 .scroll-box {
40 40 > .box {
41 41 display: block;
  42 + white-space: nowrap;
  43 + width: 100%;
42 44 .item-box {
43 45 padding-right: 40px;
44 46 &:first-child {
... ... @@ -57,6 +59,8 @@
57 59 padding-bottom: 26px;
58 60 > .box {
59 61 display: block;
  62 + white-space: nowrap;
  63 + width: 100%;
60 64 .item-box {
61 65 padding-right: 30px;
62 66 &:first-child {
... ... @@ -91,6 +95,8 @@
91 95 padding-bottom: 26px;
92 96 > .box {
93 97 display: block;
  98 + white-space: nowrap;
  99 + width: 100%;
94 100 .item-box {
95 101 padding-right: 30px;
96 102 &:first-child {
... ...
src/components/horizList/horizList.vue
  View file @ee7b64c
... ... @@ -4,7 +4,8 @@
4 4 <div class="box" :class="'com-' + com + ' pid-' + pid">
5 5 <div class="h-box">
6 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 9 <div class="item-box" v-for="(item, index) in lists" :key="index">
9 10  
10 11 <!--
... ... @@ -141,7 +142,7 @@
141 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 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 }
... ...