总结所做所学

这周做的是一个学长布置的类京东商品列表页和商品详情页，还有很多不懂，没有全部完成，先把做了什么，学了什么，怎么用组件等小小的记录一下。不多说

vant 搜索框组件slot使用

可见slot要加template使用

    <van-sticky>
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        input-align="left"
        shape="round"
        background="#0D803D"
      >
      <template v-slot:left>
        <van-icon
          class="icon-left"
          name="arrow-left"
          size="1.7rem"
          color="white"
        />
      </template>
      </van-search>

vant组件引入方法
在main.js中引入

import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

在vue页面引入

import { Icon, Search, Tab, Tabs, Sticky, Popup } from 'vant'
export default {
  name: 'Search',
  components: {
    [Icon.name]: Icon,
    [Search.name]: Search,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Sticky.name]: Sticky,
    [Popup.name]: Popup,
    Brand
  }
 }

单选

绑定class名为 syntChecked 通过点击事件将index传入data中的 selectIndex，当当前的index与点击的index相同时显示样式，其他的则不显示

<ul>
  <li
    :class="{ syntChecked: index === selectIndex }"
    v-for="(item, index) of syntList"
    :key="index"
    @click="SyntCheck(item, index)"
  >{{ item }}<span v-show="index === selectIndex" class="iconfont">&#xe668;</span></li>
</ul>

多选

绑定样式通过 xxx.includes() 判断数组中是否存在该元素，存在时返回true，从而显示样式

<span
  :class="{rightChecked: checkedList.includes(innerItem)}"
  @click="RightCheck(innerItem)"
>{{ innerItem }}</span>

通过点击事件将当前所选内容传入数组，如果已存在，则通过indexOf获取所在位置index，通过数组的splice方法删除从而改变样式

RightCheck (item) {
  if (!this.checkedList.includes(item)) {
    this.checkedList.push(item)
  } else {
    var index = this.checkedList.indexOf(item)
    this.checkedList.splice(index, 1)
  }
}

布局小技巧

通过使用flex布局和在select-item离添加width: 100%可以使当综合换成字更多的 评价最多 时布局不发生改变

.select-bar {
  padding: 0.8rem 0.3rem;
  display: flex;
  justify-content: space-around;
  background: white;
  .select-item {
    width: 100%;
    text-align: center;
    display: inline-block;
    line-height: 0.625rem;
    font-family: PingFangSC-Regular;
    font-size: 0.625rem;
    color: #999999;
    letter-spacing: 0;
  }
  .select-item:first-child {
    color: #0D803D;
  }
  .select-item:last-child {
    border-left: 1px solid #999999;
    color: #0D803D;
  }
}

带右箭头的栏

<div class="discount">
  <span class="discount-title">优惠</span>
  <span class="discount-lable">活动预告</span>
  <span class="discount-desc">08月26日00:00满两件,总价打9折</span>
  <div class="icon-container"><span class="iconfont">&#xe652;</span></div>
</div>

.discount {
  position: relative;
  margin: 1rem 0.5rem;
  display: flex;
  align-items: center;
  span {
    vertical-align: middle;
  }
  .discount-title {
    font-family: PingFangSC-Semibold;
    font-size: 0.875rem;
    color: #333333;
    letter-spacing: 0;
    font-weight: bold;
    margin-right: 0.5rem;
  }
  .discount-lable {
    padding: 0.1rem;
    background: #e7d3d3;
    font-family: PingFangSC-Regular;
    font-size: 0.625rem;
    color: #D92B2B;
    letter-spacing: 0;
    line-height: 0.75rem;
    border-radius: 0.25rem;
    margin: 0 0.5rem;
  }
  .discount-desc {
    font-family: PingFangSC-Regular;
    font-size: 0.75rem;
    color: #666666;
    letter-spacing: 0;
    line-height: 1rem;
  }
}
.icon-container {
  display: flex;
  align-items: center;
  height: 100%;
  position: absolute;
  right: 0;
  .iconfont {
    color: #afafaf;
    font-size: 0.625rem;
  }
}

横向滚动

<div class="lable-bar">
  <span class="lable-item">返红包</span>
  <span class="lable-item" @click="DropDown">品牌<span class="iconfont arrow-down">&#xe658;</span></span>
  <span class="lable-item">面部防护<span class="iconfont arrow-down">&#xe658;</span></span>
  <span class="lable-item">面部防护<span class="iconfont arrow-down">&#xe658;</span></span>
</div>

.lable-bar {
  background: white;
  padding: 0.8rem 0.4rem;
  overflow-x: scroll;
  white-space: nowrap;
  .lable-item {
    margin-left: 0.4rem;
    padding: 0.4rem 1.2rem;
    font-family: PingFangSC-Regular;
    font-size: 0.75rem;
    color: #666666;
    letter-spacing: 0;
    line-height: 1rem;
    background: rgba(0,0,0,0.03);
    border-radius: 0.875rem;
    .arrow-down {
      font-size: 0.625rem;
    }
  }
}

下一步计划

解决手写弹窗和遮罩问题