移动端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>

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

移动端app关键关键字搜索相关推荐

一种很轻松的Excel关键字方式进行Android端APP自动化测试（Java+Appium+TestNG+Excel）
说明本次分享Android端APP自动化测试Excel执行逻辑,整体逻辑与Web端类似,没看过的读者可看这里 =========>> 一种很轻松的Excel关键字方式进行网页Web自动化 ...
wml在文本框中输入中文关键字搜索时，服务端获取到的值总是乱码的解决方法。...
wml在文本框中输入中文关键字搜索时,服务端获取到的值总是乱码,该如何解决? 现提供一个客户端对关键字编码,服务端再解析的方法,应该可以完美的解决这一问题. wml文件: <?xml versi ...
API接口：item_search - 按关键字搜索商品
为了进行电商平台 lazada 的API开发,首先我们需要做下面几件事情. 1)开发者注册一个账号 2)然后为每个 lazada 应用注册一个应用程序键(App Key) 3)下载 lazada AP ...
vue 仿二手交易app_Vue全家桶仿闲鱼移动端App
官方文档介绍:Vue.js,一套渐进式的JavaScript框架,拥有简单小巧的核心,却足以应付任何规模的应用.因此,想通过仿闲鱼移动端App这个项目来感受vue带来的灵活与轻盈. 话不多说,来看看效 ...
京东API开发系列：京东按关键字搜索商品 API / item_search - 按关键字搜索商品 API返回值说明
为了进行电商平台京东的API开发,首先我们需要做下面几件事情. 1)开发者注册一个账号 2)然后为每个京东应用注册一个应用程序键(App Key) . 3)下载京东API的SDK并掌握基本的API基础 ...
【无标题】item_search - 按关键字搜索淘宝商品API接口调用展示
为了进行电商平台 lazada 的API开发,首先我们需要做下面几件事情. 1)开发者注册一个账号 2)然后为每个 lazada 应用注册一个应用程序键(App Key) . 3)下载 lazada ...
item_search - 按关键字搜索1688商品
为了进行电商平台API开发,我们需要做下面几件事情. 1)开发者注册一个账号 2)然后在平台应用注册一个应用程序键(App Key) . 3)下载平台API的SDK并掌握基本的API基础知识和调用 4 ...
item_search - 按关键字搜索亚马逊商品
为了进行电商平台API开发,我们需要做下面几件事情. 1)开发者注册一个账号 2)然后在平台应用注册一个应用程序键(App Key) . 3)下载平台API的SDK并掌握基本的API基础知识和调用 4 ...
移动端App测试实用指南
from: http://cdc.tencent.com/?p=6545 译者注:本文从测试人员的角度出发,提出了100多个在测试移动App过程中需要考虑的问题.不管你是测试人员.开发.产品经理或是 ...

移动端app关键关键字搜索

主页面

关键字搜索

移动端app关键关键字搜索相关推荐

最新文章

热门文章