搜索列表（一）-搜索列表的基本布局

商品列表布局

• 商品列表页搜索条

<div class="search">
  <div class="search-input">
    <icon type="search" size="16" color="#999"/>
    {{keyword}}
  </div>
</div>

• 商品列表Tab布局

<div class="tabs">
  <div @click='tabHandle(index)' :class='{active: currentIndex === index}' :key='index' v-for='(item, index) in tabNames' class="tab-item">
    {{item}}
  </div>
</div>

商品列表展示

• 列表基本布局

<div class="goods-list">
  <img :src="item.goods_small_logo" mode="aspectFill"/>
  <div class="goods-right">
    <h4>
      {{item.goods_name}}
    </h4>
    <div class="price">
      <span>￥</span>{{item.goods_price}}
    </div>
  </div>
</div>

• 列表数据加载

// 根据关键字加载匹配的商品列表数据
async loadData () {
  // 获取列表数据
  let res = await request('goods/search', {
    query: this.kw,
    pagenum: this.pagenum,
    pagesize: this.pagesize
  })
  this.list = res.goods
  this.total = res.total
}

实例

第一步：在search_list文件夹下，新建main.less文件

.search {
  padding: 20rpx;
  background: #eee;
  .search-input {
    padding: 0 20rpx;
    background: #fff;
    border-radius: 4px;
    height: 60rpx;
    font-size: 16px;
    display: flex;
    align-items: center;
    color: #999;
    icon {
      margin-right: 5px;
    }
  }
}

.tabs {
  display: flex;
  width: 100%;
  justify-content: space-around;
  border-bottom: 1px #eee solid;
  .tab-item {
    padding: 20rpx 0;
      //& ——指代父级元素
    &.active {
      color: red;
    }
  }
}

.goods-list {
  padding: 0 20rpx;
  .goods-item {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0;
    border-bottom: 1px #eee solid;
    img {
      width: 200rpx;
      height: 200rpx;
      display: block;
      margin-right: 20rpx;
      flex-shrink: 0;
    }
    .goods-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      h4 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }
    .price {
      color: red;
      font-size: 18px;
      span {
        font-size: 14px;
      }
    }
  }
}

.more {
  padding: 20rpx;
  text-align: center;
  color: #999;
  font-size: 14px;
}

第二步：在search_list文件夹下的index.vue中进行导入样式

<style scoped lang="less">
  @import './main.less';
</style>

第三步：基本结构布局

<template>
  <div>
    <!-- 顶部搜索栏 -->
    <div class="search">
      <div class="search-input">
        <icon type="search" size="16" color="#999"/>
        {{kw}}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      kw: '',
      tabData: ['综合', '销量', '价格'],
    }
  }
}
</script>

点击关键字历史记录小米，列表页展示

tab栏展示

第一步：定义tab栏title数据

export default {
  data () {
    return {
      kw: '',
        //tab栏数据
      tabData: ['综合', '销量', '价格'],
    }
  }
}
</script>

第二步：tab栏结构

 <!-- 筛选条件栏分类 -->
    <div class="tabs" @click='handleChange'>
      <div :data-index='index' :class="['tab-item', {active: currentIndex===index}]" :key='index' v-for='(item, index) in tabData'>{{item}}</div>
    </div>

第三步：默认展示第一个

初始数据为0

export default {
  data () {
    return {
      kw: '',
        //tab栏数据
      tabData: ['综合', '销量', '价格'],
      currentIndex: 0,
    }
  }
}

默认显示第一条

第四步：实现tab选项切换,给父级绑定事件 @click='handleChange'

 <!-- 筛选条件栏分类 -->
    <div class="tabs" @click='handleChange'>
      <div :data-index='index' :class="['tab-item', {active: currentIndex===index}]" :key='index' v-for='(item, index) in tabData'>{{item}}</div>
    </div>

第五步：处理方法

methods:{
    handleChange (e) {
      // 控制选项卡切换
      this.currentIndex = e.target.dataset.index
    }    
}

第六步：实现tab栏测试