// me.$refs.vueScroll.addEventListener("scroll",me.onscroll.bind(me)); this.boxToTop=document.getElementById("mia-scroll").offsetTop; this.init(); }, } .mia-scroll{ width: 100%; height: 100%; overflow: hidden; position: relative; .mia-scroll-box{ width: calc(100% + 20px); ...
let vm = this; if (getScrollTop() + getWindowHeight() >= getScrollHeight()) { if (vm.page.current < vm.page.totalpage) { //先判断下一页是否有数据 vm.page.current += 1; //查询条件的页码+1 this.init(this.activeName); //拉取数据 } else { //没有下一页了喔 } } }, }, ...
**/export default{name:"HdScroll",props:{showBar:{type:Boolean,default:false}},data(){return{box:undefined,// 自定义滚动条盒子bar:undefined,// 滚动条barHeight:50,// 滚动条高度ratio:1,// 滚动条偏移率force:false,// 滚动条是否被鼠标光标按住hover:false,// 鼠标光标是否悬停在盒子上show:fals...
s-scroll 完整代码 src/plugins/SUI/s-scroll.vue <template> <transition :enter-active-class="inClass" :leave-active-class="outClass" > <slot></slot> </transition> </template> exportdefault{ props: { inClass:String, outClass:String }, data() { return{ screeHeight:0, ref:'', sho...
{border:1px solid #0062B2;}&:active{border:1px solid #C0C4CC;}&:visited{border:1px solid #0062B2;}input::-webkit-input-placeholder{color:#C0C4CC;}input::-moz-placeholder{/* Mozilla Firefox 19+ */color:#C0C4CC;}input:-moz-placeholder{/* Mozilla Firefox 4 to 18 */color:#C0C4CC;...
},methods: {// 页面滚动事件handleScroll() {this.visible=window.pageYOffset>this.visibilityHeight; },// 点击页面置顶backToTop() {if(this.isMoving)return;conststart =window.pageYOffset;leti =0;this.isMoving=true;this.interval=setInterval(() =>{constnext =Math.floor(this.easeInOutQuad(10...
组件样式代码: .qf-scroll-container{width:100%;width:80%;margin:0auto;position:relative;background:#eeeeee;padding:15px;}.container::-webkit-scrollbar{display:none;}.container{width:100%;height:100%;overflow:auto;}.arow{position:absolute;right:-25px;cursor:pointer;width:50px;height:50px;bor...
轮播图效果使用的是 BetterScroll 2.0 参考链接 ./base/slider/use-slider.js 文件 导入轮播图核心滚动和滑动栏 定义滑动栏和当前页 new BScroll() 可以接收多个参数,第二个参数可以是对象的形式,里面添加多个参数 import BScroll from '@better-scroll/core' import Slide from '@better-scroll/slide' import ...
.scroll-up-leave-to{ transform: translate3d(0,-100%,0); } /* 向上匀速滚动动画 */ .scroll-up-linear-enter-active, .scroll-up-linear-leave-active{ transition: all 1s linear; /*此时间必须和 playTime 保持一致*/ } .scroll-up-linear-enter{ ...
overflow-x: scroll; width: 100%; white-space: nowrap; .item { display: inline-block; height: 2rem; line-height: 2rem; margin: 0.5rem; padding: 0px 0.8rem; text-align: center; color: red; } .active { background-color: #036875; ...