hookehuyr

fix 荣誉展示移动端显示优化,箭头显示问题处理

1 <!-- 1 <!--
2 * @Date: 2024-10-17 11:13:44 2 * @Date: 2024-10-17 11:13:44
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-28 10:53:33 4 + * @LastEditTime: 2024-11-05 10:48:20
5 * @FilePath: /hager/src/views/about/honors.vue 5 * @FilePath: /hager/src/views/about/honors.vue
6 * @Description: 关于海格-荣誉展示 6 * @Description: 关于海格-荣誉展示
7 --> 7 -->
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
68 </div> 68 </div>
69 </swiper-slide> 69 </swiper-slide>
70 </swiper> 70 </swiper>
71 - <div v-if="item.list.length > item.slidesPerView || is_xs" class="xs-control"> 71 + <div v-if="item.list.length > item.slidesPerView" class="xs-control">
72 <div> 72 <div>
73 <i :class="['el-icon-arrow-left', item.activeIndex === 0 ? 'disabled' : '']" @click="prevBtn(item)"></i>&nbsp; 73 <i :class="['el-icon-arrow-left', item.activeIndex === 0 ? 'disabled' : '']" @click="prevBtn(item)"></i>&nbsp;
74 <i :class="['el-icon-arrow-right', item.reach_end ? 'disabled' : '']" @click="nextBtn(item)"></i> 74 <i :class="['el-icon-arrow-right', item.reach_end ? 'disabled' : '']" @click="nextBtn(item)"></i>
...@@ -144,6 +144,7 @@ export default { ...@@ -144,6 +144,7 @@ export default {
144 }); 144 });
145 this.honors_cate_list = this.all_honors_list[0]['children']; // 默认第一个 145 this.honors_cate_list = this.all_honors_list[0]['children']; // 默认第一个
146 this.honors_cate_list.forEach((item) => { 146 this.honors_cate_list.forEach((item) => {
147 + item.activeIndex = 0;
147 this.$nextTick(() => { 148 this.$nextTick(() => {
148 const swiperRef = this.$refs[`mySwiper${item.id}`]; 149 const swiperRef = this.$refs[`mySwiper${item.id}`];
149 if (swiperRef && swiperRef[0].$swiper) { 150 if (swiperRef && swiperRef[0].$swiper) {
...@@ -193,9 +194,10 @@ export default { ...@@ -193,9 +194,10 @@ export default {
193 } else { 194 } else {
194 item.reach_end = false; 195 item.reach_end = false;
195 } 196 }
197 + this.$forceUpdate();
196 }, 198 },
197 checkOverflow () { // 检测内容是否超出,避免overflow IE显示问题 199 checkOverflow () { // 检测内容是否超出,避免overflow IE显示问题
198 - this.$refs.contentDiv.forEach(div => { 200 + this.$refs.contentDiv?.forEach(div => {
199 // 判断内容是否超出 div 的高度 201 // 判断内容是否超出 div 的高度
200 if (div.scrollHeight > div.clientHeight) { 202 if (div.scrollHeight > div.clientHeight) {
201 div.style.overflowY = 'scroll'; 203 div.style.overflowY = 'scroll';
......