<!-- 功能:在线联系 --> <style scoped> /* */ /* 下面是上拉加载 */ .more { width: 100vw; text-align: center; position: relative; top: -10px; color: gray; height: 80px; line-height: 80px; } /* 下面是下拉刷新 */ .refresh { width: 100vw; text-align: center; position: relative; top: -50px; color: gray; } /* */ .myul li { width: 100vw; height: 300px; margin: 40px 0px 20px 0px; } .pdivone { width: 100vw; height: calc(100vh - 100px); background-color: pink; position: fixed; left: 0px; top: 100px; overflow: hidden; } #header { width: 100vw; height: 100vh; } * { margin: 0; padding: 0; } .header_ul { display: flex; width: 90vw; height: 30px; justify-content: space-between; transform: translateX(0px); font-size: 30px; line-height: 95px; } .header_ul li { padding-bottom: 80px; cursor: pointer; padding-left: 2px; } .pppsldfejishiname { font-size: 28px; font-weight: 600; width: 100vw; height: 100px; text-align: center; line-height: 100px; /* background-color: pink; */ } .active { color: red !important; } /* 头部*/ .titlediv { width: 100vw; height: 90px; background-color: #fff; display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 0px 20px 0px 20px; } .titlediv .onediv { font-size: 35px; } .titlediv .twodiv { font-size: 28px; } .titlediv .oneimg { width: 33px; height: 33px; } </style> <template> <div id="header" @touchmove.prevent @mousewheel.prevent style="background-color: #fff;"> <!-- 下面是头--> <div class="titlediv"> <img @click="gotoback" class="oneimg" src="http://blog.img.duanshuilu.com/基材sdf向左箭头.png" alt=""> <div class="pppsldfejishiname"> 任务中心</div> </div> <!-- 上面是头 --> <!-- --> <!-- 下面是全部 ........................................................................................................... --> <!-- 计算高度 ---然后在里面做滚动效果--> <div class="pdivone" ref="wrapper"> <!-- 下面的第一个标签,就是滚动内容 --> <div class="myul"> <p class="refresh" ref="refresh">下拉刷新</p> <div v-for="(item,index) in [33,1,1,1,1,1,1,1,1,1,1,1,1,11,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1, 1,1,1,1,1,1,1,11,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,99]" :key="index" style="font-size:50px;"> {{item}} </div> <p class="more" ref="more">上拉加载</p> </div> <!-- 上面的第一个标签,就是滚动内容 --> </div> <!-- 上面是全部 ........................................................................................................... --> </div> </template> <script> import BScroll from '@better-scroll/core' import Pullup from '@better-scroll/pull-up' export default { name: 'homeLayoutHeader', components: {}, mounted() { let that = this that.jishidata = JSON.parse(window.localStorage.getItem('selectjishiobj')) console.log('打印一下技师对象', that.jishidata) setTimeout(() => { this.initScroll() }, 20) }, data() { return { scroll: null, myindex: 0, active: 0, // scroll: null, } }, created() { let that = this }, methods: { gotoback() { //返回 this.$router.go(-1) }, initScroll() { let that = this this.scroll = new BScroll(this.$refs.wrapper, { // click: true, // observeDOM: true, // observeImage: true, // 监听 probeType: 3, scrollY: true, //垂直方向滚动 click: true, //默认会阻止浏览器的原生click事件,如果需要点击,这里要设为true pullUpLoad: true, //上拉加载更多 pullDownRefresh: { threshold: 50, //触发pullingDown事件的位置 stop: 0 //下拉回弹后停留的位置 } }); //监听下拉刷新 this.scroll.on("pullingDown", pullingDown); //监测实时滚动 this.scroll.on("scroll", scrollon); //上拉加载更多 this.scroll.on("pullingUp", pullingUp); async function pullingDown() { console.log('下拉刷新'); that.$refs.refresh.innerHTML = '刷新中...' setTimeout(() => { that.$refs.refresh.innerHTML = '刷新完成' }, 2000) that.scroll.finishPullDown(); //每次下拉结束后,需要执行这个操作 //that.scroll.refresh(); //当滚动区域的dom结构有变化时,需要执行这个操作 } async function pullingUp() { console.log('上拉加载'); that.$refs.more.innerHTML = '加载中...' setTimeout(() => { that.$refs.more.innerHTML = '加载完成' }, 2000) that.scroll.finishPullUp(); //每次上拉结束后,需要执行这个操作 //that.scroll.refresh(); //当滚动区域的dom结构有变化时,需要执行这个操作 } function scrollon() { // console.log(this.x, this.y); //如上,打印x和y轴 } function getlist() { } console.log(this.scroll) // bs.on('scroll', position => { // console.log(position.x, position.y) // }) }, } } </script>
任务中心
标签:
评论者:[[ schemeInfo.user.username ]]
评论内容:[[ schemeInfo.pbody ]]
评论时间:[[ schemeInfo.ptime ]]
发表你的评论:
提交评论
上一篇:
mytime.vue
下一篇:
headershoushuo.vue