vue-seamless-scroll
vue-seamless-scroll copied to clipboard
singleHeight只能写固定值,不能适配不同手机屏幕
同感, @pangshaohua 能解决一下吗
@pangshaohua @kiteliu 移动端的单行滚动上,适配目前版本没有做到很好兼容。有新版本兼容后,会说明下的。
import Vue from "vue"; import scroll from "vue-seamless-scroll"; Vue.use(scroll);
// 或者你可以自己设置全局注册的组件名 默认注册的组件名是 vue-seamless-scroll Vue.use(scroll, { componentName: "scroll-seamless" });
import { indexTopList } from "@/api/act1";
export default { data() { return { scrollCfg: {}, listData: [{ nickName: "test" }] }; },
created() { indexTopList({ actNumber: "act1" }).then(res => { const liHeight = document.querySelector( ".seamless-warp ul > li:nth-child(1)" ).clientHeight; console.log("liHeight", liHeight);
this.scrollCfg = {
hoverStop: false,
waitTime: 1000,
limitMoveNum: 6,
singleHeight: liHeight
};
console.log(this.scrollCfg);
this.listData = res.data;
});
} }; 计算出单行li高度: 费了几个小时弄的移动端不同屏幕,用rem布局,li单行高度不一致的问题。 初始化一条数据,用于通过js计算单行li的高度, 拿到后端数据后,先计算出组件的配置文件参数scrollCfg,然后给数据再赋值,开始渲染滚动效果