VUE3+ts 使用 vue-seamless-scroll or vue3-seamless-scroll

最新推荐文章于 2024-03-18 21:31:11 发布

奺儿

最新推荐文章于 2024-03-18 21:31:11 发布

阅读量480

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_47247479/article/details/133031421

版权

VUE3+ts 使用 vue-seamless-scroll or vue3-seamless-scroll

npm install vue3-seamless-scroll --save

使用页面引入

import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
components: { Vue3SeamlessScroll },

如果报错说找不到vue3-seamless-scroll模块则在src->shims-vue.d.ts 文件中声明

declare module 'vue3-seamless-scroll';

vue3-seamless-scroll 使用中的参数参考网址https://github.com/xfy520/vue3-seamless-scroll

html

	<vue3-seamless-scroll
      :list="dataList"
      direction="left"
      hover="true"
      limitScrollNum="5"
      :step="0.4"
      class="seamless-warp2"
    >
      <ul class="ul-scoll">
        <li v-for="(item, index) in dataList" :key="index">
          <img class="img" :src="item.picture" alt="" />
        </li>
      </ul>
    </vue3-seamless-scroll>

css

    <style lang="scss" scoped>
		.seamless-warp2 {
		  width: 200px;
		  overflow: hidden;
		  .ul-scoll {
		    display: flex;
		  }
		}
		.img {
		  width: 100px;
		}
	</style>