码迷,mamicode.com
首页 > Web开发 > 详细

css3transiton 的使用

时间:2020-07-04 12:00:44      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:rap   put   token   vue   title   cti   his   ade   set   

<template>
  <transition name="slide">
    <div class="search_page">
 
     123
  </transition>
</template>

 

<script>
 
export default {
  name: "SearchPage",
  components: {
    SearchHeader,
    [Icon.name]: Icon,
    VueBetterScroll,
    CourseItem,
    NoData,
  },
  data() {
    return {
      isFocus: true,
      noBlur: true,
      searchText: "",
      historyList: [],
      accessToken: parseParam(window.location.href).accessToken || "",
      // VueBetterScroll 配置
      scrollbarObj: {
        fade: true,
      },
      pullDownRefreshObj: {
        threshold: 90,
        stop: 40,
      },
      pullUpLoadObj: {
        threshold: 0,
        txt: {
          more: "加载更多",
          noMore: "没有更多数据了",
        },
      },
      startY: 0,
      scrollToX: 0,
      scrollToY: 0,
      scrollToTime: 700,
      items: [],
      pageSize: 20,
      pageNum: 1,
    };
  },
  props: {
    searchState: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    searchState(newVal) {
      if (newVal) {
        this.$refs.SearchHeader.$refs.searchInput.focus();
      } else {
        this.$refs.SearchHeader.$refs.searchInput.blur();
      }
    },
    isFocus(newVal) {
      // 获取焦点后查询当前用户的历史记录
      if (newVal) {
        this.getSearchDataList();
      }
    },
  },
  mounted() {
    this.getSearchDataList();
  },
  methods: {
    goBack() {
      this.$emit("goBack");
    },
    handleFocus(state) {
      if (state) this.noBlur = true;
      this.isFocus = state;
    },
    handleSearch() {
      console.log(this.searchText);
      this.$refs.SearchHeader.$refs.searchInput.blur();
      this.noBlur = false;
      this.saveSearchData();
      this.onPullingDown();
    },
    historyClick(item) {
      this.searchText = item.content;
      this.isFocus = false;
      this.noBlur = false;
      this.onPullingDown();
    },
    // 查询历史记录
    async getSearchDataList() {
      const response = await this.$request(API.studyCenter.getSearchDataList, {
        method: "get",
        params: {
          accessToken: this.accessToken,
          flag: 1,
        },
      });
      this.historyList = [...((response && response.result) || [])];
    },
    // 删除历史记录
    async delSearchDataList() {
      const response = await this.$request(API.studyCenter.delSearchDataList, {
        method: "get",
        params: {
          accessToken: this.accessToken,
          flag: 1,
        },
      });
      if (response && response.code === 200) this.historyList = [];
    },
    // 添加历史数据
    async saveSearchData() {
      await this.$request(API.studyCenter.saveSearchData, {
        method: "get",
        params: {
          accessToken: this.accessToken,
          flag: 1,
          content: this.searchText,
        },
      });
    },
    // 数据请求
    getListData(params) {
      const that = this;
      const { pageNum } = params;
      return that
        .$request(API.studyCenter.getLessonDataList, {
          method: "get",
          params: {
            accessToken: this.accessToken,
            page: pageNum,
            rows: that.pageSize,
            typeId: 0,
            text: this.searchText,
          },
        })
        .then((res) => {
          return new Promise((resolve) => {
            resolve(res);
          });
        });
    },
    onPullingDown() {
      this.pageNum = 1;
      this.getListData({ pageNum: this.pageNum }).then((response) => {
        this.items = [];
        const { result = [], totalNum } = response;
        this.items = [...result];
        if (Math.ceil(totalNum / this.pageSize) === this.pageNum) {
          this.$refs.search_scroll.forceUpdate(false);
        } else {
          this.$refs.search_scroll.forceUpdate(true);
        }
      });
    },
    onPullingUp() {
      this.pageNum++;
      this.getListData({ pageNum: this.pageNum }).then((response) => {
        const { result = [], totalNum } = response;
        this.items = this.items.concat(result);
        if (Math.ceil(totalNum / this.pageSize) === this.pageNum) {
          this.$refs.search_scroll.forceUpdate(false);
        } else {
          this.$refs.search_scroll.forceUpdate(true);
        }
      });
    },
    touchstart(ev) {
      addClass(ev.currentTarget, "icon_on");
    },
    touchend(ev) {
      removeClass(ev.currentTarget, "icon_on");
    },
    // 跳转详情 回来刷新局部
    bindReload(nub) {
      if (nub === 1) {
        window.reload = () => {
          console.log("第二个页面");
          this.onPullingDown();
        };
      }
    },
  },
};
</script>

 

<style lang="scss" scoped>
@import "~assets/css/mixins";
.search_page {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background: $color-white;
  z-index: 200;
  box-shadow: 0px 0px 40px rgba(128, 128, 128, 0.4);
  &.slide-enter-active,
  &.slide-leave-active {
    transition: all 0.3s;
    transform: translate3d(0, 0, 0);
  }
  &.slide-enter,
  &.slide-leave-to {
    transform: translate3d(100%, 0, 0);
  }
  .search_content {
    position: absolute;
    left: 0;
    top: 88px;
    bottom: 0;
    right: 0;
    width: 100%;
    .history_wrap {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow-y: auto;
      background: $color-white;
      z-index: 201;
      .title {
        margin-top: 28px;
        font-size: 24px;
        color: $color-n2-5;
        align-items: center;
        padding: 0 32px;
        @include flex-r();
        @include flex-justify();
        .icon_wrap {
          width: 44px;
          height: 44px;
          @include flex-r();
          @include flex-center();
          &.icon_on {
            background: $color-faint-Black;
          }
        }
      }
      .history_lists {
        // width: 100%;
        padding-left: 32px;
        display: flex;
        flex-flow: row wrap;
        li {
          width: auto;
          display: inline-block;
          height: 56px;
          padding: 0 36px;
          border-radius: 28px;
          margin: 20px 32px 0 0;
          border: 1.5px solid $color-n1-4;
          color: $color-n2-5;
          font-size: 28px;
          line-height: 57px;
          &.icon_on {
            background: $color-faint-Black;
          }
          // &:nth-child(4n) {
          //   margin-right: 0;
          // }
        }
      }
    }
    .search_content_list {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow-y: auto;
      background: $color-white;
    }
  }
}
</style>

css3transiton 的使用

标签:rap   put   token   vue   title   cti   his   ade   set   

原文地址:https://www.cnblogs.com/bamboopanders/p/13234239.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!