<!--html模板--> <template> 　　<div class="wrapper" ref="wrapper"> 　　　　<slot> 　　　　　　<div class="content"> 　　　　　　　　<div class="item" v-for="item in dataList" :key="item"> 　　　　　　　　　　{{ item }}-內容 　　　　　　　　</div> 　　　　　　</div> 　　　　</slot> 　　</div> </template> <!--js-->
<script> 　　import Bscroll from 'better-scroll' 　　export default { 　　　　name: 'Scroll', 　　　　props: { 　　　　　　dataList: { 　　　　　　　　type: [Array, Number, String], 　　　　　　　　default: null, 　　　　　　}, 　　　　}, 　　　　data() { 　　　　　　return { 　　　　　　　　scroll: null, 　　　　　　} 　　　　}, 　　　　created() { 　　　　　　this.init() 　　　　}, 　　　　methods: { 　　　　　　init() { 　　　　　　　　this.$nextTick(() => { 　　　　　　　　　　this.scroll = new Bscroll(this.$refs.wrapper, { 　　　　　　　　　　　　　　　　　　　　　　probeType: 3, 　　　　　　　　　　　　　　　　　　　　　　pullUpLoad: { 　　　　　　　　　　　　　　　　　　　　　　　　threshold: 50, 　　　　　　　　　　　　　　　　　　　　　　}, 　　　　　　　　　　　　　　　　　　　　　　pullDownRefresh: { 　　　　　　　　　　　　　　　　　　　　　　　　threshold: 50, 　　　　　　　　　　　　　　　　　　　　　　　　stop: 20, 　　　　　　　　　　　　　　　　　　　　　　}, 　　　　　　　　　　　　　　　　}) 　　　　　　　　this.scroll.on('pullingUp', () => { 　　　　　　　　　　　　console.log('上拉載入') 　　　　　　　　　　　　this.$emit('pullUp', (flag) => { 　　　　　　　　　　　　　　if (flag) { 　　　　　　　　　　　　　　　　//請求結束後執行重新整理操作 　　　　　　　　　　　　　　　　this.scroll.refresh() 　　　　　　　　　　　　　　} 　　　　　　　　　　　　}) 　　　　　　　　　　　　//當重新整理時觸發 　　　　　　　　}) 　　　　　　　　this.scroll.on('pullingDown', () => { 　　　　　　　　　　console.log('下拉重新整理') 　　　　　　　　　　this.$emit('pullDown', (flag) => { 　　　　　　　　　　　　if (flag) { 　　　　　　　　　　　　　　this.scroll.refresh() 　　　　　　　　　　　　} 　　　　　　　　　　}) 　　　　　　　　}) 　　　　　　}) 　　　　　}, 　　　　}, 　　} </script> <!--css-->
<style lang="less"> .item { 　　height: 80px; } .wrapper { 　　height: 400px; 　　width: 100vw; 　　overflow: hidden; } </style>