【金秋打卡】第9天 全新升级，基于Vue3新标准，打造后台综合解决方案 第九讲

课程名称： 全新升级，基于Vue3新标准，打造后台综合解决方案

课程章节： 列表排序解决方案与实现热门文章排名功能

主讲老师： Sunday

课程内容：

今天学习的内容包括：

文章排名功能的实现

课程收获：

9.1 心得：

"use strict";

Component({
  properties: {
    tab_datas: {
      type: Array,
      value: [],
      observer: "onItemsChange"
    },

  },


  data: {
    content: '',
    searchValue: '',
  },


  methods: {
    onItemsChange: function onItemsChange() {
      this.setData({

      });
    },
    bindSearchInput: function bindSearchInput(e) {
      this.setData({
        content: e.detail.value
      })
      this.triggerEvent('onSearchInputChange', { content: e.detail.value });
    },
    onClickClear: function onClickClear(e) {
      this.setData({
        searchValue: '',
        content: ''
      });
      this.triggerEvent('onSearchInputChange', { content: this.data.content });
    },
    bindConfirmSearch: function bindConfirmSearch(e) {
      this.triggerEvent('onClickSubmit', { content: e.detail.value });
    },
    onClickSearch: function onClickSearch(e) {
      this.triggerEvent('onClickSubmit', { content: this.data.content });
    },
    onChangeInputValue: function onChangeInputValue(e) {
      this.setData({
        searchValue:e
      });
    }
  }
});

.container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

.container {
    height: 120rpx;
    flex-direction: row;
    padding: 22rpx 32rpx;
}


.search_container{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background-color: #F9FAFB;
    border-radius:38rpx;
    height: 76rpx;
    flex-grow: 1;
    box-sizing: border-box;
    padding: 20rpx 20rpx;
    margin-right: 46rpx;
  }
  
  .letf_search{
    width: 24rpx;
    height: 24rpx;
    flex-shrink: 0;
    margin-right: 20rpx;
  }

  .input_delete{
    width: 40rpx;
    height: 40rpx;
    flex-shrink: 0;
    margin-left: 20rpx;
  }
  
  .search_input{
    font-size: 24rpx;
    color: #333333;
    flex-grow: 1;
  }

  .search_placeholder{
    font-size: 24rpx;
    color: #999999;
  }

.search_btn{
    line-height: 40rpx;
    font-size: 28rpx;
    flex-shrink: 0;
    padding: 24rpx 0;
    text-align: center;
    color: #0093FC;
    font-weight: bold;
}

.tab_item {
    flex-direction: column;
    position: relative;
}

.tab_item_checked, .tab_item_normal, .tab_title {
    width: 100%;
    line-height: 48rpx;
    font-size: 28rpx;
    flex-grow: 1;
    padding: 24rpx 0;
    text-align: center;
    box-sizing: border-box;
    font-weight: bold;
    border-bottom: 1px solid #dce0e6
}

.tab_item_checked {
    color: #0077FF;
}

.tab_item_normal {
    color: #1A173B;
}

.tab-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -25rpx;
    z-index: 99;
    background-color: #0077FF;
    width: 50rpx;
    height: 6rpx;
}






.search_suggest,.suggest_item_container{
  display: flex;
  background-color: #fff;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.search_suggest{
  flex-direction: column;
}

.suggest_item_container{
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  margin: 0 32rpx;
  border-bottom: 1rpx solid #F6F6F6;
}


.right_arrow{
  width: 15rpx;
  height: 25rpx;
  flex-shrink: 0;
  margin-left: 10rpx;
  margin-right: 10rpx;
}

.suggest_item_content{
  line-height: 34rpx;
  font-size: 24rpx;
  flex-shrink: 0;
  text-align: center;
  color: #333333;
}

.search{
  width: 686rpx;
  height: 88rpx;
  background: #F6F3F7;
  border-radius: 12rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  margin-top: 48rpx;
}

.search image{
  width: 30rpx;
  height: 30rpx;
  margin-left: 30rpx;
}

.search input{
  width: 540rpx;
}

.line{
  width: 2rpx;
  height: 32rpx;
  background: #CCCCCC;
  margin: 0 20rpx ;
}