uni |
您所在的位置：网站首页 › 微信小程序做搜索框 › uni |
uni
|
把搜索的输入框写成了一个组件 父组件直接引用即可 废话不说上代码 搜索框组件 search.vue 搜索 {{ !show ? searchName : '搜索' }} export default { props: { mode: { type: Number, default: 1 }, button: { type: String, default: 'outside' }, show: { type: Boolean, default: true }, radius: { type: String, default: '60' }, placeholder: { type: String, default: '请输入搜索内容' }, backgroundColor: { type: String, default: '#fff' }, border: { type: String, default: '1px #f5f5f5 solid' } }, data() { return { active: false, inputVal: '', searchName: '取消', isDelShow: false, isFocus: false }; }, methods: { focus() { this.active = true; }, blur() { this.isFocus = false; if (!this.inputVal) { this.active = false; } }, clear() { this.inputVal = ''; this.active = false; this.$emit('search', ''); }, getFocus() { this.isFocus = true; }, search() { if (!this.inputVal) return; console.log(this.inputVal); this.$emit('search', this.inputVal); } }, watch: { inputVal(newVal) { if (newVal) { this.searchName = '搜索'; this.isDelShow = true; } else { this.searchName = '取消'; this.isDelShow = false; } } } }; .search { display: flex; width: 100%; border-bottom: 1px #f5f5f5 solid; box-sizing: border-box; padding: 15upx; font-size: $uni-font-size-base; background: #fff; .content { display: flex; align-items: center; width: 100%; height: 60upx; border: 1px #ccc solid; background: #fff; overflow: hidden; transition: all 0.2s linear; border-radius: 30px; .content-box { width: 100%; display: flex; align-items: center; background-color:#F4F4F4; &.center { justify-content: center; } .icon { padding: 0 15upx; &.icon-del { font-size: 38upx; } } .input { width: 100%; max-width: 100%; line-height: 60upx; height: 60upx; color:#333; font-size:28upx; // transition: all 0.2s linear; &.center { width: 200upx; } &.sub { // position: absolute; width: auto; color: grey; } } } .searchBtn { height: 100%; flex-shrink: 0; padding: 0 30upx; background: $uni-color-success; line-height: 60upx; color: #fff; border-left: 1px #ccc solid; transition: all 0.3s; } } .button { display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; width: 0; transition: all 0.2s linear; white-space: nowrap; overflow: hidden; &.active { padding-left: 15upx; width: 100upx; color: #8BC34A; } } } @font-face { font-family: 'iconfont'; src: url('https://at.alicdn.com/t/font_989023_efq0mtli526.ttf') format('truetype'); } .icon { font-family: iconfont; font-size: 32upx; font-style: normal; color: #999; }
引用 搜索框 Quotesearch.vue ============================= 使用 ================================== 下面是我写的一些别的 可以不用看 热门搜索 {{ item }} {{ item.product_name }} {{ item.settlement }} | {{ item.recruitment }} | {{ item.sex }} {{ item.remuneration }} {{ item.remuneration_type }} //引入进来 import mSearch from '@/components/mehaotian-search/search.vue'; api 是封装了请求数据 不用看 import { api } from '@/common/api.js'; export default { // 注册子组件 components: { mSearch }, data() { return { keyword: '', jobList: '', mhotKey: ['服务员', '客服', '销售', '在线直播','提成','校园代理','家教','餐饮','促销','派单','日结','分拣打包'], isShowHotKey: true }; }, methods: { search(e, val) { // console.log(e, val); // this['val'+val] = e; if (e == '') { uni.showToast({ title: '请输入关键词', icon: 'none', duration: 2000 }); return; } this.getJoblist(1, 20, e).then(rs => { let [err, res] = rs; let { code, data } = res.data; if (code == 1001) { this.jobList = data; this.isShowHotKey = false; } else { uni.showToast({ title: '换一个关键词试试吧', icon: 'none', duration: 2000 }); } }); }, goDetailPage(key) { uni.navigateTo({ url: '/pages/select/detail?id=' + key }); }, getJoblist(_page = 1, _limit = 10, _keyword) { 接口换成自己的 return api.post('https://job.liaotaba.com/api/product/dataList', { page: _page, limit: _limit, product_type: this.pid, keyword: _keyword, token: uni.getStorageSync('token') ? uni.getStorageSync('token') : '', uid: uni.getStorageSync('uid') ? uni.getStorageSync('uid') : '', type: '', is_selected: '', is_hot: '', is_tuijian: '' }); } } }; .hot-search-wrap { padding: 20upx; .hot-search { font-size: 32upx; font-weight: 500; color: #333; padding:10upx; overflow: hidden; position:relative; .shugang{ display: inline-block; width: 6upx; height: 30upx; background-color: #89C756; position: absolute; top: 18upx; left: 30upx; } .textinfo{ display: inline-block; width: 200upx; height: 34upx; margin-left: 40upx; color: #333333; font-weight: 600; } } .hot-key-wrap { overflow: hidden; margin-top: 20upx; .hot-key { float: left; margin-right: 20upx; padding: 14upx 40upx; margin-bottom: 30upx; background: #f4f4f4; font-size: 28upx; border-radius: 10upx; color: #898989; font-weight: 600; } } } .wrapper { padding: 10upx 30upx 0; } .job-list-wrap { overflow: hidden; .job-list { overflow: hidden; border-bottom: 2upx solid #d7d7d7; padding: 30upx 0 32upx; .icon { float: left; width: 56upx; height: 56upx; image { width: 56upx; height: 56upx; } } .job-con-wrap { float: left; margin-left: 19upx; width: 424upx; font-size: 30upx; .job-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #333333; font-size: 35upx; font-weight: 600; .hot { width: 60upx; height: 30upx; margin-left: 20upx; } } .job-tip { margin-top: 22upx; font-size: 24upx; color: #868686; clear: both; } } .job-rich { float: left; width: 190upx; text-align: right; font-size: 36upx; font-weight:600; color:rgba(229,28,35,1); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 30upx; .job-salary { font-size:36upx; font-family:PingFangSC; font-weight:600; color:rgba(229,28,35,1); text-align: right; } .job-cen{ font-size:28upx; font-family:PingFangSC; font-weight:400; color:rgba(229,28,35,1); text-align: right; } } } }
初始化显示
输入显示
好了完了 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |