vue-better-scroll A vue plugins based onbetter-scroll 最近写移动端项目,下拉刷新、上拉加载的场景很常见,发现mint-ui的 Loadmore 组件效果体验不尽如人意,Vux的 Scroller 组件作者不推荐使用也停止维护了,最后决定根据 better-scroll 封装成自己的 vue 组件,作者也提供了详细的教程。
Install vue2-better-scroll yarn add vue2-better-scroll // or npm install vue2-better-scroll -s Vue mount // import import Vue from 'vue' import VueBetterScroll from 'vue2-better-scroll' // or require var Vue = require('vue') var VueBetterScroll = require('vue2-better-scroll') /...
1)首先要使点击有效,因为 better-scroll将默认事件都阻止了 2)为左侧的分栏绑定点击事件,并获取 index ,然后使右边的相应 index 分类滚动就行了~so easy ...but!!! 怎么下手?!! 1. 先实现滑动右边触发左边的功能: 做法: (1)定义变量先~ 在data中加入一个 listHight: [] 数组;一个变量scrollY : 0,用...
首先 引入 better-scroll: importBScrollfrom'better-scroll'; AI代码助手复制代码 1: 使用 mounted() 函数 mounted() {this.scroll=newBScroll(this.$refs.divScroll, {click:true, }); }, AI代码助手复制代码 2.使用 created() 函数 created() {this.$nextTick(() =>{this.scroll=newBScroll(this.$...
1.最外层加ref，让better-scroll通过ref来获取整个div；2.紧跟⼀个div，不⽤加任何样式或class，最终可以滑动的部分就是这个div，这个div必须是加了ref 的div 的直接⼦元素。在这个div⾥⾯就可以放置希望滑动的内容了。⼆： css部分 .example width: 100% position: absolute top: 174px bottom: 48px...
VueBetterScroll } } // 或者直接导⼊js⽂件 Use in SPA <template> vue-better-scroll demo <!-- 需要⼀个创建⼀个⽗容器组件⾼度默认等于⽗容器的⾼度 --> <vue-better-scroll class="wrapper"ref="scroll":scrollbar="scrollbarObj":pullDownRefresh="pullDownRefreshObj":pullUpL...
给个小建议,其实我们没有必要在每次数据请求成功之后再去手动调用initScroll方法。我们完全可以将滚动条抽离出来成为scroll子组件,然后在父组件里将数据data通过props传递给scroll子组件,然后我们在scroll子组件里watch这个props,当prop更新的时候,watch方法里就调用better-scroll的refresh方法。这样的话,每次当数据更新的时候...
常用的第三方库包括vue-pull-to和better-scroll等。 使用vue-pull-to 安装: bash npm install vue-pull-to --save 使用: vue <template> <pull-to :top-load-method="loadTop"> <div v-for="item in items" :key="item.id">{{ item.name }}</div> </...
技术栈: Vue + better-scroll 地址:vue-movie ✨ 功能 登录、注册及退出 城市定位 正在热映电影、即将热映电影 电影详情页 不同城市影院信息、电影信息检索等 📚 更多描述 各模块组件的架构,涉及页面可视化展示、即时通信、与后端开发进行联调沟通、同步实现项目阶段需求等; ...
// better-scroll的初始化 let scrollOptions = { probeType: this.probeType, click: this.click, scrollX: this.scrollX, preventDefaultException: this.preventDefaultException, bounce: this.bounce, bounceTime: this.bounceTime, eventPassthrough: this.eventPassthrough } if (this.pulldown) { let pullDown...