移动端app关键关键字搜索

主页面

<template>
  <div class="bian">
      <router-view />
      <ul>
          <router-link to="/shoye" tag="li">首页</router-link>
          <router-link to="/fenlei" tag="li">分类</router-link>
          <router-link to="/gowuche" tag="li">购物车</router-link>
          <router-link to="/wode" tag="li">我的</router-link>
      </ul>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {};
  },
  mounted() { 
//this.axios.get('/').then((res) => {
//this.result = res.result;
//});
},
  methods: {},
  computed: {},
  watch: {},
};
</script>

<style scoped>
.bian{
    width: 100%;
    height: 100%;
}
ul{
    width: 100%;
    height: 50px;
    background: #666;
    display: flex;
    position: fixed;
    bottom: 0;
}
li{
    width: 25%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
}
.router-link-active{
    background: blue;
    color: red;
}
</style>

关键字搜索

<template>
  <div>
    <p>lativ诚衣</p>
    <!-- 搜索 -->
    <van-search shape="round" placeholder="搜索商品" />
    <!-- 商品分类 -->
    <van-tabs v-model="index1">
      <van-tab v-for="(item,index) in result" :title="item.title" :key="index" :name='item._id'>
        <!-- {{index1}} -->
        <div >
          <ul>
            <li v-for="(item,index) in liebiao" :key="index" v-show="index1==item.cid">
              {{item.title}}
               <img v-lazy="item.pic">
            </li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 轮播图
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>3</van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
</van-swipe>
数据
<div class="bi">
  <ul>
    <li v-for="(item,index) in liebiao" :key="index">
      <img v-lazy="item.pic">
    </li>
  </ul>
</div> -->
  </div>
</template>

<script>
import Vue from "vue";
import { Search } from "vant";
Vue.use(Search);

import { Tab, Tabs } from "vant";
Vue.use(Tab);
Vue.use(Tabs);

import { Swipe, SwipeItem } from 'vant';
Vue.use(Swipe);
Vue.use(SwipeItem);

import { Lazyload } from 'vant';
Vue.use(Lazyload);

export default {
  name: "",
  data() {
    return {
      result:[],
      liebiao:[],
      index1:0,
    };
  },
  mounted() {
    this.$axios.get('/json/fenlei.json').then((res) => {
      console.log(res);
    this.result = res.result;
    });
    this.$axios.get('/json/list1.json').then((res) => {
      console.log(res);
    this.liebiao = res.result;
    });
  },
  methods: {},
  computed: {},
  watch: {},
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .bi{
    width: 100%;
    height: 100%;
  }
  ul{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  li{
    width: 47%;
    height: 200px;
    margin: 1%;
  }
  img{
    width: 100%;
    height: 100%;
  }
</style>

![在这里插入图片描述]