任务中心

<!--
  功能:在线联系
-->

<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 ]]





发表你的评论:

提交评论
上一篇:
下一篇: