Vue Mixinis
Vue中可以可以实现 组件混入的写法, 类似Python 的多继承关系
-
在 scroll.js中对 better-scroll 进行二次封装
import BScroll from 'better-scroll' export default { data(){ return{ down:false,//下拉时顶部是否显示加载中 up:false,//上拉时底部是否显示加载中 upend:false,//数据加载完成底部提示 bol:false,//最后一次加载 scrollStyle :'', sateY:0, lastList:0,//最后一页是几条 totalBalance:0,//合计，后端只返回每页的合计，需累加 } }, created(){ setTimeout(()=>{ //提前加载滚动插件 this._initSlider() },20) }, watch:{ // 监听渲染的数据列表发生变化之时 dataList(){//监听数据变化，重新初始化滚动函数 seTimeout(()=>{//提前加载滚动插件 this.refresh(); // this.scroll.refresh(); BS内置重置 滚动方法, 防止滚动高度发生偏差 if(scrollStyle === 'up'){ //如果是上拉，滚动条直接滚动到 this.scroll.scrollTo(0,this.satrY(115*this.lastList)) } },20) } }, methods:{ _initSlider(){ //下拉刷新，上拉加载 if(!this.$refs.wrapper){ return } //better-scroll初始化 this.scrool = new BScroll(this.$refs.wrapper,{ probeType:3, click:true, scrollx:true }); // 监听scroll的滚动事件, 回调函数会传入 位置信息 this.scool.on('scroll',pos=>{ this.satry = pos.y; //如果下拉超过50px 就显示下拉刷新的文字 this.down = true; // pos.y > 50 ?(this.down = true):(this.down = false) this.down = pos.y > 50 }); //touchEnd 通过这个方法来监听下拉刷新 (即 监听手指抬起这个动作) this.scroll.on('touchEnd ',pos=>{ //下拉动作 if(pos.y > 10){ this.scrollStyle = 'down'; this.down = true; console.log('下拉刷新'); this.pagNo = 1; //请求第一页 this.upend = false; this.totalBalance = 0;//下拉刷新合计清0 this.upend = false; this.getData().then(res=>{ //刷新数据 this.down = false; //去除旧数据，防止数组一直累加 this.dataList.length = 0; this.dataList = res; return }) } if(this.scroll.maxScrollY > pos.y +10){ //这里的10是距离底部多少像素的时候触发 if(!this.bol){//如果是最后一次请求 this.up = false; this.upend = true; return } this.satry = pos.y; this.scrollStyle = 'up'; console.log('上拉刷新'); this.up = true; this.pageNo = this.pageNoNew;//赋值之前存储的当前页数 if(this.up){ this.getData().then(res=>{ this.dataList = res; }) } } }) } }, refresh(){ this.scroll && this.scroll.refresh(); } } -
在Vue组件中 混入封装 scroll.js插件
<!--注意，这里必须用v-show，以便预加载滚动插件--> <div v-show='dataList.length > 0'> <div class='wrapper' ref='wrapper'> <ul class='content'> <!-- transition是Vue内置的动画插件 name是指动画效果 --> <transition name='fade'> <div class='newxin' v-show='down'> <p> <loading-tip size='24px'>下拉刷新</loading-tip> </p> </div> </transition> <li class='myorderList' v-for='(item,index) in dataList' :key="index" :id="`scroll-item-${index}`" > <div @click='myOrderFind(index)'> <p> {{item.totalRealPrice}}元</p> <p> {{item.title}}</p> <p> {{item.totalRealPrice}}元</p> </div> </li> <transition name='fade'> <div class='newxin'> <p v-show='up'> <!-- 随便做一个 加载提示的组件, 实在不行就写个 p 标签 --> <loading-tip size='24px'>加载中...</loading-tip> </p> <p v-show='upend'> <loading-tip size='24px'>已经没有更多了~~~</v-loading> </p> </div> </transition> </ul> </div> </div> <div v-else> <nodata-tip txt='暂无数据'></nodata-tip> </div> <script> import { scrollMixin} from '/mixin/scoll'; import LoadingTip from "@/components/common/loading_tip" import NodataTip from "@/components/common/nodata_tip" export default { mixins:[scrollMixin], data(){ return{ dataList:[],//渲染的数据列表 pageNo:1,//第几页 pageSize:10,//多少条 pageNoNew :0, } }, compoonents: { LoadingTip: LoadingTip, NodataTip: NodataTip }, created(){ this.getData(); }, methods:{ getData(){//构造一个promise请求 this.up = false; this.down = false; return this. $Api.getMyorder(this.pageNo,this.pageSize). then(res =>{ if(res.code == 200){ if(res.data.length > 0){ this.dataList = this.dataList.concat(res.data); this.totalBalance += res.totalBalance ; this.pageNo++; this.pageNoNew = this.pageNo;//上拉加载时，存储当前页 } if(this.dataList.length >= res.total){ this.bol = false;//停止请求数据 this.upend = true; }else{ this.bol = true; this.upend = false; this.up = false; } }else{ //使用cube-ui的错误提示 this.$createToast({ type: "info", txt: res.message, time: 1500 }).show() } }) // 请求成功返回异步获取的数据 return this.dataList }) } } } </script>
