zuel-itsm-3.0.2/src/views/noticeList.vue

<template>
    <div>
        <div slot="content" class="scroll-wrapper bgColor">
            <div class="demo">
                <div class="scroll-list-wrap">
                    <cube-scroll ref="scroll" :data="items" :options="options" @pulling-down="onPullingDown" @pulling-up="onPullingUp">
                        <div class="search">
                            <input type="text" placeholder="搜索" v-model="search" @input="searchFn()">
                        </div>
                        <ul class="foods-wrapper">
                            <li v-for="data in items" class="food-item border-1px" @click="toNoticeDetails(data)">
                                <div class="food-content">
                                    <div class="title">
                                        <span>{{data.title}}</span>
                                    </div>
                                    <div class="time">
                                        <span>{{data.dept?data.dept.dept:""}}</span>
                                        <span>{{data.createTime}}</span>
                                    </div>
                                </div>
                            </li>
                            <div class="wushuju" v-show="wushuju">
                                <img src="./../../static/images/wugonggao.svg" alt="">
                                <div class="noDataFont">暂无数据</div>
                            </div>
                        </ul>
                        <template v-if="customPullDown" slot="pulldown" slot-scope="props">
                            <div v-if="props.pullDownRefresh" class="cube-pulldown-wrapper" :style="props.pullDownStyle">
                                <div v-show="props.beforePullDown" class="before-trigger" :style="{paddingTop: props.bubbleY + 'px'}">
                                    <span :class="{rotate: props.bubbleY > pullDownRefreshThreshold - 40}">↓</span>
                                </div>
                                <div class="after-trigger" v-show="!props.beforePullDown">
                                    <div v-show="props.isPullingDown" class="loading">
                                        <cube-loading></cube-loading>
                                    </div>
                                    <div v-show="!props.isPullingDown" class="text">
                                        <span class="refresh-text">更新成功</span>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </cube-scroll>
                </div>
            </div>
        </div>
        <load-ing v-show="loadShow"></load-ing>
    </div>
</template>
<script>
import Vue from 'vue'
import CubePage from '../components/cube-page.vue'
import SwitchOption from '../components/switch-option'
import InputOption from '../components/input-option'
import SelectOption from '../components/select-option'
import LoadIng from './../views/loading.vue'
export default {
  data() {
    return {
    //   items: _foods,
        items:[],
      pullDownRefresh: true,
      pullDownRefreshThreshold: 60,
      pullDownRefreshStop: 40,
      pullDownRefreshTxt: 'Refresh success',
      pullUpLoad: true,
      pullUpLoadThreshold: 0,
      pullUpLoadMoreTxt: 'Load more',
      pullUpLoadNoMoreTxt: '没有更多数据',
      wushuju:false,
      search:"",
      customPullDown: true,
      sum:10,
      idx:0,
      loadShow:true
    }
  },
  components: {
    CubePage,
    SwitchOption,
    InputOption,
    SelectOption,
    LoadIng
  },
  computed: {
    options() {
      return {
        pullDownRefresh: this.pullDownRefreshObj,
        pullUpLoad: this.pullUpLoadObj,
        scrollbar: true
      }
    },
    pullDownRefreshObj: function() {
      return this.pullDownRefresh ? {
        threshold: parseInt(this.pullDownRefreshThreshold),
        txt: this.pullDownRefreshTxt
      } : false
    },
    pullUpLoadObj: function() {
      return this.pullUpLoad ? {
        threshold: parseInt(this.pullUpLoadThreshold),
        txt: {
          more: this.pullUpLoadMoreTxt,
          noMore: this.pullUpLoadNoMoreTxt
        }
      } : false
    }
  },
  methods: {
    searchFn(){
      var that=this;
      this.idx=0;
      that.loadShow=true;
      this.$http.post('service/user/data/fetchDataList/notice',{
        'idx':0,
        'sum':10,
        'notice':{
          'content':this.search,
          'title':this.search,
          'status':1
        }
      }).then(function(res){
          if(res.data.list.length>0){
            that.items=res.data.list;
            that.wushuju=false
          }else{
            that.wushuju=true;
            that.items=[]
          }
          that.loadShow=false
      })
    },
    toNoticeDetails(data){
      this.$router.push({
          name:'NoticeDetails',
          params:{
              data:JSON.stringify(data)
          }
      })
    },
    onPullingDown() {
      // 模拟更新数据
      this.idx=0;
      setTimeout(() => {
        var that=this;
        this.$http.post('service/user/data/fetchDataList/notice',{
          'idx':0,
          'sum':10,
          'notice':{
            'content':this.search,
            'title':this.search,
            'status':1
          }
        }).then(function(res){
            if(res.data.list.length>0){
                that.items=res.data.list;
                that.wushuju=false;
            }else{
                that.$refs.scroll.forceUpdate();
                that.wushuju=true;
                that.items=[];
            }
        })
      }, 1000)
    },
    getData(idx,sum){
        var that=this;
        this.$http.post('service/user/data/fetchDataList/notice',{
          'idx':idx,
          'sum':sum,
          'notice':{
            'content':this.search,
            'title':this.search,
            'status':1
          }
        }).then(function(res){
            if(res.data.list.length>0){
              that.items=res.data.list;
              that.wushuju=false
            }else{
              that.wushuju=true
            }
            that.loadShow=false
        })
    },
    onPullingUp() {
      var that=this;
      that.idx=that.idx+1;
        this.$http.post('service/user/data/fetchDataList/notice',{
          'idx':that.idx,
          'sum':that.sum,
          'notice':{
            'content':this.search,
            'title':this.search,
            'status':1
          }
        }).then(function(res){    
            setTimeout(() => {
                if(res.data.list.length>0){
                    that.items=that.items.concat(res.data.list);
                }else{
                    that.$refs.scroll.forceUpdate()
                }
            }, 1000)
        })
    },
    updatePullDownRefresh(val) {
      this.pullDownRefresh = val
    },
    updatePullDownRefreshThreshold(val) {
      this.pullDownRefreshThreshold = val
    },
    updatePullDownRefreshTxt(val) {
      this.pullDownRefreshTxt = val
    },
    updatePullUpLoad(val) {
      this.pullUpLoad = val
    },
    updatePullUpLoadThreshold(val) {
      this.pullUpLoadThreshold = val
    },
    updatePullUpLoadMoreTxt(val) {
      this.pullUpLoadMoreTxt = val
    },
    updatePullUpLoadNoMoreTxt(val) {
      this.pullUpLoadNoMoreTxt = val
    },
    updateCustomPullDown(val) {
      this.customPullDown = val
    },
    rebuildScroll() {
      Vue.nextTick(() => {
        this.$refs.scroll.destroy()
        this.$refs.scroll.initScroll()
      })
    }
  },
  created(){
      this.getData(this.idx,this.sum)
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.scroll-list-wrap 
  /* height: 350px */
  height:100vh
  /* border: 1px solid rgba(0, 0, 0, 0.1) */
  border-radius: 5px
  transform: rotate(0deg) // fix 子元素超出边框圆角部分不隐藏的问题
  overflow: hidden

.foods-wrapper 
  .food-item 
    display: flex
    padding: .24rem
    border-bottom: 1px solid rgba(7, 17, 27, 0.1)

    &:last-child 
      border-none()
      margin-bottom: 0
    .icon 
      flex: 0 0 57px
      margin-right: 10px

    .food-content 
      flex: 1
      .name 
        margin: 2px 0 8px 0
        height: 14px
        line-height: 14px
        font-size: 14px
        color: rgb(7, 17, 27)
      .description, .extra 
        line-height: 10px
        font-size: 10px
        color: rgb(147, 153, 159)
      .description 
        line-height: 12px
        margin-bottom: 8px
      .extra 
        .count 
          margin-right: 12px
      .price 
        font-weight: 700
        line-height: 24px
        .now 
          margin-right: 8px
          font-size: 14px
          color: rgb(240, 20, 20)
        .old 
          text-decoration: line-through
          font-size: 10px
          color: rgb(147, 153, 159)
      .cartcontrol-wrapper 
        position: absolute
        right: 0
        bottom: 12px
        .scroll-wrapper{
  .cube-pulldown-wrapper{
    .before-trigger{
      font-size: 30px;
      line-height: 30px;
      align-self: flex-end;
      span{
        display: inline-block;
        transition: all 0.3s;
        color: #666;
        &.rotate{
            transform: rotate(180deg)
          }
      } 
    }
    .after-trigger{
      .refresh-text{
        color: grey
      }
    }
 }
}
</style>
<style scoped>
.search{
    padding: .16rem .24rem;
    height: .6rem;
    background-color: #eeeeee
}
.bgColor{
    background-color: white
}
.search input{
  width: 100%;
  height: .56rem;
  border-radius: 4px;
  text-align: center;
  font-size: .28rem
}
.search:focus{
    outline:none
}
.title{
    line-height: .45rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}
.title span{
  font-size: .32rem;
}
.time{
    display: flex;
    justify-content:space-between;
    margin-top: .08rem;
    color:#999999
}
.time span{
  font-size: .24rem
}
.wushuju{
    margin-top: 2.4rem;
    text-align: center;
}
.wushuju img{
    width: 5.12rem;
    height: 2.84rem;
}
</style>