【vue】vue-slick-carousel插件,实现横向滚动列表手动左右滚动(也可设置为自动滚动)

文章讲述了如何使用VueSlickCarousel库来实现在图片列表横向滚动时隐藏原滚动条,通过箭头控制滚动,并展示了详细的配置代码和CSS样式调整。

需求:图片列表横向滚动的时候,隐藏原始滚动条,通过左右箭头控制滚动条往左右按一定的步长移动。

el-carousel走马灯一滚动就是一屏,不适合我的需求

在npm官网搜vue-slick-carousel,查看更详细的配置

vue-slick-carousel配置请戳这里

效果图:
在这里插入图片描述
相关配置代码:
在这里插入图片描述
在这里插入图片描述
以下是具体代码:

npm i vue-slick-carousel

页面中使用

import VueSlickCarousel from "vue-slick-carousel";
import "vue-slick-carousel/dist/vue-slick-carousel.css";
// optional style for arrows & dots
import 
### Vue3 中解决 `img` 的 `src` 更新后组件未重新渲染的问题 在 Vue3 中,如果图片的 `src` 属性动态更新后组件未重新渲染,通常是因为响应式系统未能正确检测到数据的变化。以下是几种解决方案: #### 1. 确保数据是响应式的 在 Vue3 中,确保 `homeBgImg` 是通过 `reactive` 或 `ref` 定义的响应式数据。如果使用了普通对象或数组,可能会导致 Vue 无法检测到变化[^2]。例如: ```javascript import { reactive } from 'vue'; export default { setup() { const homeBgImg = reactive([]); const handlet = () => { axios.get(getApiUrl("jiekou")).then(res => { homeBgImg.splice(0, homeBgImg.length, ...res.data.data.list); // 使用 splice 方法更新数组 }).catch(error => { error_msg(error); }); }; return { homeBgImg, handlet }; } }; ``` #### 2. 强制更新组件 如果图片的 `src` 更新后仍然未重新渲染,可以通过为 `<img>` 标签添加 `key` 属性来强制组件重新渲染。每次 `src` 发生变化时,更新 `key` 的值即可[^3]。例如: ```html <VueSlickCarousel v-bind="settings1"> <div v-for="(item, index) in homeBgImg" :key="`${item.pic}-${index}`" v-cloak> <img :src="item.pic" :alt="item.topText" /> </div> </VueSlickCarousel> ``` #### 3. 检查异步加载逻辑 如果图片的 `src` 是通过异步操作(如 API 请求)更新的,确保在数据更新后通知 Vue 重新渲染。可以使用 `$nextTick` 来确保 DOM 已经更新[^4]。例如: ```javascript axios.get(getApiUrl("jiekou")).then(res => { this.homeBgImg = res.data.data.list; this.$nextTick(() => { console.log('Images updated:', this.homeBgImg); }); }).catch(error => { error_msg(error); }); ``` #### 4. 避免直接修改不可响应的数据 在 Vue3 中,直接修改非响应式对象的属性可能导致组件无法重新渲染。如果需要动态添加属性,建议使用 `Proxy` 或 `Object.assign` 来确保数据的响应性[^5]。例如: ```javascript const newItem = { pic: 'new-image.jpg', topText: 'New Image' }; Object.assign(this.homeBgImg[0], newItem); // 确保属性更新被检测到 ``` #### 5. 使用虚拟列表优化性能 对于包含大量图片的轮播图组件,可以考虑使用虚拟列表技术来优化性能。通过只渲染可见区域的内容,减少 DOM 节点的数量,从而提升渲染效率[^3]。例如: ```html <virtual-scroller class="scroller" :items="largeDataList" :item-height="50" v-slot="{ item }"> <div class="list-item"> <img :src="item.avatar" /> <span>{{ item.name }}</span> </div> </virtual-scroller> ``` --- ### 注意事项 - 如果问题依然存在,检查是否由于第三方组件(如 `VueSlickCarousel`)的限制导致。某些组件可能需要额外的配置才能正确处理动态内容。 - 确保图片路径正确且服务器支持跨域访问。如果图片加载失败,可能是由于路径错误或 CORS 限制引起的。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值