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

<template>
  <div class="bgColor">
    <div class="header">公告列表</div>
    <div class="search">
      <input type="text" placeholder="搜索" v-model="search" @input="searchData()">
    </div>
    <div slot="content" class="scroll-wrapper nav">
      <div class="demo">
        <div class="scroll-list-wrap">
          <cube-scroll
            ref="scroll"
            :data="items"
            :options="options"
            @pulling-down="onPullingDown"
            @pulling-up="onPullingUp"
          >
            <div class="list">
              <div class="item" v-for="item in items" @click="toDetail(item)">
                <div
                  class="title overflowEllipsis2"
                  style="-webkit-box-orient: vertical !important;"
                >{{item.title}}</div>
                <i class="iconfont icon-moren"></i>
                <p class="time">{{item.createTime}}</p>
              </div>
            </div>
            <div class="wushuju" v-show="items.length==0&&wushuju&&!loadShow">
              <img src="./../../static/images/wushuju.svg" alt>
              <p>暂无公告</p>
            </div>
            <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> -->
                    <span class="refresh-text"></span>
                  </div>
                </div>
              </div>
            </template>
          </cube-scroll>
        </div>
      </div>
    </div>
    <load-ing v-show="loadShow&&!items.length"></load-ing>
  </div>
</template>
<script>
import Vue from "vue";
import LoadIng from "./../views/loading.vue";
export default {
  data() {
    return {
      pullDownRefresh: true,
      pullDownRefreshThreshold: 60,
      pullDownRefreshStop: 40,
      pullDownRefreshTxt: "Refresh success",
      pullUpLoad: true,
      pullUpLoadThreshold: 0,
      pullUpLoadMoreTxt: "加载更多",
      pullUpLoadNoMoreTxt: "没有更多数据",
      wushuju: false,
      customPullDown: true,
      loadShow: true,
      noMore: false,
      sum: 10,
      idx: 0,
      search: "",
      items: [],
      searching:false
    };
  },
  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;
    }
  },
  components: {
    LoadIng
  },
  methods: {
    // 搜索
    searchData() {
      var that = this;
      that.idx = 0;
      that.items = [];
      that.searching=true;
      that.getData();
    },
    // 获取数据
    getData() {
      var that = this;
      that.loadShow = true;
      that.$http
        .post("service/user/data/fetchDataList/notice", {
          idx: that.idx,
          sum: that.sum,
          notice: { title: that.search, status: 1 }
        })
        .then(function(res) {
          if (res.data.list.length > 0) {
            if (that.searching) {
              that.items = res.data.list;
            } else {
              that.items = that.items.concat(res.data.list);
            }
            that.wushuju = false;
          } else {
            that.wushuju = true;
            that.$refs.scroll.forceUpdate();
          }
          that.loadShow = false;
        });
    },
    // 查看详情
    toDetail(item) {
      this.$router.push({ name: "GuideDetail", params: { data: item } });
    },
    onPullingDown() {
      var that = this;
      that.idx = 0;
      that.sum = 10;
      that.items = [];
      that.loadShow = true;
      setTimeout(() => {
        that.getData();
      }, 500);
    },
    onPullingUp() {
      var that = this;
      that.idx += 1;
      that.searching=false;
      that.loadShow = true;
      that.getData();
    },
    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();
      });
    }
  },
  mounted() {},
  created() {
    this.getData();
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.scroll-list-wrap {
  /* height: 350px */
  height: 87vh;
  /* border: 1px solid rgba(0, 0, 0, 0.1) */
  border-radius: 5px;
  transform: rotate(0deg); // fix 子元素超出边框圆角部分不隐藏的问题
  overflow: hidden;
  padding-top: 14vh;
}

.foods-wrapper {
  .food-item {
    display: flex;

    /* min-width: 0 */
    /* padding: 18px
    border-bottom: 1px solid rgba(7, 17, 27, 0.1) */
    &:last-child {
      border-none();
      margin-bottom: 0;
    }

    .food-content {
      flex: 1;
      min-width: 0;

      .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 lang='less'>
.bgColor {
  background-color: white;
}
.header {
  width: 100%;
  height: 0.88rem;
  line-height: 0.88rem;
  text-align: center;
  color: #fff;
  font-size: 0.37rem;
  background: linear-gradient(#2e2f32, #414246);
  position: fixed;
  top: 0;
  z-index: 6;
}
.search {
  padding: 0.16rem 0.24rem;
  box-sizing: border-box;
  width: 100%;
  background-color: #eeeeee;
  border-bottom: 0.01rem #b7b7b7 solid;
  position: fixed;
  top: 0.88rem;
  z-index: 6;
  input {
    width: 100%;
    height: 0.56rem;
    border-radius: 4px;
    text-align: center;
    font-size: 0.28rem;
    &:focus {
      outline: none;
    }
  }
}
.list {
  .item {
    padding-left: 0.24rem;
    border-bottom: 0.01rem solid #e3e3e3;
    position: relative;
    padding-right: 0.9rem;
    .iconfont {
      position: absolute;
      right: 0.24rem;
      top: 40%;
      color: #999;
    }
    .title {
      font-size: 0.32rem;
      color: #333;
      line-height: 0.45rem;
      // padding-right: 0.96rem;
      padding-top: 0.24rem;
      position: relative;
      max-height: 0.9rem;
      // max-width: 88%;
      i {
        position: absolute;
        right: 0.24rem;
        top: 56%;
        color: #999;
        font-size: 0.34rem;
      }
    }
    .time {
      font-size: 0.24rem;
      color: #999;
      line-height: 0.6rem;
    }
  }
}
.loading {
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wushuju {
  margin-top: 2.4rem;
  text-align: center;
  color: #999;
}
.wushuju img {
  width: 5.12rem;
  height: 2.84rem;
}
</style>